New
Nov 17, 2014 1:43 AM
#2401
Neugdae1 said: Hi Shisio-kun, thanks for all you've done with the list styles; I've really enjoyed being able to customize my lists. I've been using your anime-cover with a separate tag/review box but for some reason the tag box extends downwards to the bottom of my browser (I don't see the bottom of the textbox). I have the height set at 950 so it shouldn't be that long. I tried messing around with a few different heights and setting the height pretty low (around 200 I think) made the textbox appear in the screen again, but I was hoping you could help me with this problem so I could comment beyond 1 or 2 sentences. I'm not sure if this is relevant but I think this problem started occurring around Halloween. Here is a picture of what I am talking about Relevant CSS COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 10px; top: 120px; height: 300px; width: 210px; border-color: white; border-top: 2px solid white !important; border-left: 2px solid white !important; border-right: 2px solid white !important; border-bottom: 2px solid white !important; border-radius: 25px 25px 25px 25px; background-color: white; background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: visible; opacity: 0; position: fixed; top: 430px; left: 10px; background-color: blue; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 2px; font-size: 15px; height: 950px; width: 175px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; text-align: left; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: black !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } P.S. - sorry, but also do you know why comma's are in white in my tag/review boxes? The other punctuation marks are in black Nothing to do with Halloween or the pranks then- those pranks are long removed too. Do you want to just move the text box? The part where you set the height is where you can customize it, use the "top" and "left" to move it around, as it says in the notes for the code. Didn't you see that and didn't it work? It works in preview. You should move it to the right side, or move it up and put the cover somewhere else. Customized by the color: white !Important; in the same code I think. |
Nov 17, 2014 2:50 AM
#2402
Tommy-kun said: I am having trouble with the "more" button on my them. Since MAL readded the youtube embedding I am trying to integrate it in my current theme. I managed to find what handles the button. } #list_surround small a { visibility: hidden; font-size: 40px; } After just playing around I got the button to show up, but I cannot click it. } #list_surround small a { color: #808080; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 1; opacity: 0.8; position: absolute; text-decoration: none; top: 1px; visibility: visible !important; width: 24px; z-index: 1; } If at all possible is there a way that I can have the button on the left side of my portraits and when clicked a popup window similar to my edit window appears, or something that at least functions without looking horrible. I thank you in advance for your help. FULL CSS @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/Universal/anime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.css"; body,a { cursor:url(https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/V3/Curser%20Assets/Iwasawa.png) 1 2, auto; } a:hover { cursor: url(https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/V3/Curser%20Assets/Iwasawa_link_select.png) 1 2, auto; } /*#################################################*/ /*#############Change Banner images below##############*/ /*#################################################*/ .header_cw { background: url("https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/AnimePage/Watching.png")!important; } .header_completed { background: url("https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/AnimePage/completed.png")!important; } .header_onhold { background: url("https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/AnimePage/Hold.png")!important; } .header_dropped { background: url("https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/AnimePage/Dropped.png")!important; } .header_ptw { background: url("https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/AnimePage/PTW.png")!important; } /*############Change background image below############*/ body { background-image: url("https://dl.dropboxusercontent.com/u/24965022/MAL%20Theme%20Assets/AnimePage/BackDrop.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/24965022/MAL%20Theme%20Assets/AnimePage/NoCoverImage.jpg"); 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: 20px; left: 169px !important; position: relative; text-align: center !important; text-decoration: none; text-shadow: 0 0 1px #FFD700, 0 0 2px #FFA500; top: 237px !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: 16px; 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: 191px !important; margin-left: 17px; opacity: 0; padding-left: 12px; padding-top: 20px; 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: 101px; font-variant: small-caps; position: relative; top: 20px; left: -25px; 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: 0px; color: lightyellow !important; text-align: right; font-style: normal; } #copyright { color: #FFFFFF; font-family: Tahoma; font-size: 0px; 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; } I thought using #more style covers disables the more button so it was unclickable. Are you able to click it on your list? I don't even see it, all I can find is the edit and add buttons. btw there is a tutorial where you can add youtube videos via one click, I think it worked with #more covers tho- see tutorials in the directory I linked some comments back |
Nov 17, 2014 11:52 AM
#2403
Shishio-kun said: I thought using #more style covers disables the more button so it was unclickable. Are you able to click it on your list? I don't even see it, all I can find is the edit and add buttons. btw there is a tutorial where you can add youtube videos via one click, I think it worked with #more covers tho- see tutorials in the directory I linked some comments back You would know better than I about the #more covers. You could not see them because I reverted the code until I could get it working right. I tested the button and it is highlightable and the address is "Javascript(null)" so I would assume it was just a empty button. I tried switching over to AnimeTitle covers and that broke more than it fixed, but still the button was null. I did check out your tutorial on the youtube videos before asking so I think if nothing else I will have to switch themes over to something else. I am not willing to give up my anime covers so hopefully I can find a theme that works for me. Thanks a bunch. |
Nov 17, 2014 12:36 PM
#2404
Tommy-kun said: that it says null does not mean it is broken but if you click it with #more covers nothing will happen.Shishio-kun said: I thought using #more style covers disables the more button so it was unclickable. Are you able to click it on your list? I don't even see it, all I can find is the edit and add buttons. btw there is a tutorial where you can add youtube videos via one click, I think it worked with #more covers tho- see tutorials in the directory I linked some comments back You would know better than I about the #more covers. You could not see them because I reverted the code until I could get it working right. I tested the button and it is highlightable and the address is "Javascript(null)" so I would assume it was just a empty button. I tried switching over to AnimeTitle covers and that broke more than it fixed, but still the button was null. I did check out your tutorial on the youtube videos before asking so I think if nothing else I will have to switch themes over to something else. I am not willing to give up my anime covers so hopefully I can find a theme that works for me. Thanks a bunch. |
Nov 17, 2014 1:39 PM
#2405
@tommy-kun: Yeah by "unclickable" I meant nothing happens when you click it, but it still is highlight-able (it looks like it will work but doesn't). There's other cover styles, some that make the more button work on click, but afaik you can't replace the covers on the Lirina poster layout with them so you'd need a whole new layout: http://myanimelist.net/forum/?topicid=1162203 |
Nov 17, 2014 5:32 PM
#2406
Shishio-kun said: Neugdae1 said: Hi Shisio-kun, thanks for all you've done with the list styles; I've really enjoyed being able to customize my lists. I've been using your anime-cover with a separate tag/review box but for some reason the tag box extends downwards to the bottom of my browser (I don't see the bottom of the textbox). I have the height set at 950 so it shouldn't be that long. I tried messing around with a few different heights and setting the height pretty low (around 200 I think) made the textbox appear in the screen again, but I was hoping you could help me with this problem so I could comment beyond 1 or 2 sentences. I'm not sure if this is relevant but I think this problem started occurring around Halloween. Here is a picture of what I am talking about Relevant CSS COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 10px; top: 120px; height: 300px; width: 210px; border-color: white; border-top: 2px solid white !important; border-left: 2px solid white !important; border-right: 2px solid white !important; border-bottom: 2px solid white !important; border-radius: 25px 25px 25px 25px; background-color: white; background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: visible; opacity: 0; position: fixed; top: 430px; left: 10px; background-color: blue; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 2px; font-size: 15px; height: 950px; width: 175px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; text-align: left; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: black !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } P.S. - sorry, but also do you know why comma's are in white in my tag/review boxes? The other punctuation marks are in black Nothing to do with Halloween or the pranks then- those pranks are long removed too. Do you want to just move the text box? The part where you set the height is where you can customize it, use the "top" and "left" to move it around, as it says in the notes for the code. Didn't you see that and didn't it work? It works in preview. You should move it to the right side, or move it up and put the cover somewhere else. Customized by the color: white !Important; in the same code I think. the top and left buttons work fine, though that isn't what I was wondering about. Currently I have the height set to 950 but the box extends beyond that height, to the point it reaches the bottom of my web browser as shown in the picture. Just now changed the height to 500, 300, 200, and 150, but the textbox still extends to the end bottom of my screen the same way. The white comma fix worked though, thanks! EDIT: This is awkward.. but the textboxes suddenly started working appropriately again. Guess you can ignore the request. have a good day! |
Nov 19, 2014 9:42 AM
#2407
I'm using a pre-made layout, and I tried to add the hover cover+tag boxes. I know that I need to enable the Tags column in my list for it to work, but when I do the tags column shows up on the list and is blank. The columns are supposed to be "Anime Title", "Score", "Type", "Progress", "Start Date", and "Finish Date". Before I made the change to add the Tab box and enabled Tabs, the "Anime Title" section was wider, but now it looks like it was compressed horizontally to make room for the non-existent Tabs column. What I would like to know is how to prevent the Tab column from being there, but still allow the Tabs box beneath the image. Here is my current code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE); /* quick fix for list style problems 8/27/14. remove later if needed */ @import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; /* Math part of the layout, don't change unless you know what you're doing */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* Top bar */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body{ /* Set up a background image: */ background-image: url("http://i.imgur.com/b54J7pP.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i.imgur.com/VImNB.png); } /* Block displaying category totals * It's redesigned to be the part of the layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i.imgur.com/rSgqF.png'); } /* upd 1th March 2012*/ /* upd 20th December 2012 import links rehosted, images rehosted*/ /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 120px; top: 160px; height: 350px; width: 226px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: ; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 522px; left: 60px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 312px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } P.S. I know that there are layouts designed specifically for the mini-review box, but I've gotten very attached to the current design that I have, and would like to keep it if possible. |
Nov 19, 2014 1:52 PM
#2408
ArbiterofWhim said: I can't see the gap on your list when I go there... what browser are you using?I'm using a pre-made layout, and I tried to add the hover cover+tag boxes. I know that I need to enable the Tags column in my list for it to work, but when I do the tags column shows up on the list and is blank. The columns are supposed to be "Anime Title", "Score", "Type", "Progress", "Start Date", and "Finish Date". Before I made the change to add the Tab box and enabled Tabs, the "Anime Title" section was wider, but now it looks like it was compressed horizontally to make room for the non-existent Tabs column. What I would like to know is how to prevent the Tab column from being there, but still allow the Tabs box beneath the image. Here is my current code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE); /* quick fix for list style problems 8/27/14. remove later if needed */ @import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; /* Math part of the layout, don't change unless you know what you're doing */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* Top bar */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body{ /* Set up a background image: */ background-image: url("http://i.imgur.com/b54J7pP.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i.imgur.com/VImNB.png); } /* Block displaying category totals * It's redesigned to be the part of the layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i.imgur.com/rSgqF.png'); } /* upd 1th March 2012*/ /* upd 20th December 2012 import links rehosted, images rehosted*/ /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 120px; top: 160px; height: 350px; width: 226px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: ; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 522px; left: 60px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 312px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } P.S. I know that there are layouts designed specifically for the mini-review box, but I've gotten very attached to the current design that I have, and would like to keep it if possible. |
Nov 19, 2014 3:57 PM
#2409
Oiomi-chan said: I can't see the gap on your list when I go there... what browser are you using? I'm using Chrome. I just checked it with Firefox and you're right, the gap isn't there. I just deleted this portion of code near the bottom: /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } .table_header:nth-of-type(6) { display:none; } and it almost completely fixed itself. there's still a gap after the "Progress" column that's a space or two wide. That's fine, but if you have any other suggestions let me know. |
Nov 19, 2014 8:29 PM
#2410
ArbiterofWhim said: I just deleted this portion of code near the bottom: /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } .table_header:nth-of-type(6) { display:none; } and it almost completely fixed itself. there's still a gap after the "Progress" column that's a space or two wide. That's fine, but if you have any other suggestions let me know. That is the reason for the Google Chrome fix you deleted. In the notes it says "adjust.. if columns are uneven". It is made to line up columns as much as possible in Chrome. You're supposed to adjust it till you find the right amount. For your list, its around 550px width on that part, give or take a pixel which you'll have to find exactly what since your list has different width than mine cuz you have alot of extra text in the dates columns. Unfortunately the other extra column on planned anime only makes that part thrown off, the solution is to add a new third code under the Google Chrome fix that adds width the column, for my list using your CSS I used this: /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 547px !important;} .table_header:nth-of-type(6) { display:none; } td[width="80"] { width: 189px; } } You can see your CSS on my list for a short time to get an idea: http://myanimelist.net/animelist/Shishio-kun&status=7&order=0 |
Nov 19, 2014 11:46 PM
#2411
Shishio-kun said: That is the reason for the Google Chrome fix you deleted. In the notes it says "adjust.. if columns are uneven". It is made to line up columns as much as possible in Chrome. You're supposed to adjust it till you find the right amount. For your list, its around 550px width on that part, give or take a pixel which you'll have to find exactly what since your list has different width than mine cuz you have alot of extra text in the dates columns. Unfortunately the other extra column on planned anime only makes that part thrown off, the solution is to add a new third code under the Google Chrome fix that adds width the column, for my list using your CSS I used this: /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 547px !important;} .table_header:nth-of-type(6) { display:none; } td[width="80"] { width: 189px; } } You can see your CSS on my list for a short time to get an idea: http://myanimelist.net/animelist/Shishio-kun&status=7&order=0 Thanks so much Shishio-kun. It looks great. |
Nov 20, 2014 3:02 AM
#2412
Hey guys, I just have a quick question - On my anime list, I would like to lower the opacity of my top bar if at all possible, but I'm unsure of what to add/change in my code to make that happen. I would prefer my top bar having the same amount of transparency as my list background. If anybody can help me out, it would be greatly appreciated. Here's my code if you need it: @import url(http://fonts.googleapis.com/css?family=ABeeZee); @import url(http://fonts.googleapis.com/css?family=Leckerli+One); /* // custom css by b l i n g b l i n g @ m a l */ body { font-size: 12px; font-family: ABeeZee; color: #8a5b5e; background-color: #fcebec; background-image: url(http://1.bp.blogspot.com/-eWggFFVq578/Uhdy6yv8D3I/AAAAAAAAIbA/ehHW5w-JRoc/s1600/rurouni-kenshin-wallpapers.jpg); background-position: bottom left; background-attachment: fixed; background-repeat: no-repeat; letter-spacing: 1px; } /* // list positioning */ #list_surround { position: absolute !important; right: 700px !important; width: 600px; } /* // all links on your list */ a { color: #8a5b5e; text-decoration: none; transition: color 0.5s linear; } a:visited { color: #8a5b5e; text-decoration: none; } a:hover { color: #ed6c94; text-decoration: none; } .td1 { padding: 5px; background-color: rgba(245,227,228,0.5); } .td2 { padding: 5px; background-color: rgba(242,217,219,0.5); } small { color: #ed6c94; } /* // header */ .table_header { color: #ed6c94; border-bottom: 1px solid; border-color: #ecbfc1; background-color: rgba(242,217,219,0.5); padding: 5px; } /* // header links */ .table_headerLink { color: #ed6c94; } .table_headerLink:Visited { color: #ed6c94; } .table_headerLink:Hover { color: #ed6c94; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #ed6c94; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; } .category_totals { padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { font-size: 10px; text-align: center; } /* top menu bar full customization (thanks to shishio-kun's tutorial) */ /* first part: "username, logout" */ #mal_cs_listinfo { background-color: #f6e2e3; border-bottom: 1px solid #ecbfc1; } #mal_cs_listinfo a { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_listinfo a strong { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } /* second part: "add to list, home, anime list, manga list" */ #mal_cs_links { background-color: #f6e2e3; border-bottom: 1px solid #ecbfc1; } #mal_cs_links div:first-of-type a:first-of-type { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_links div:first-of-type a:last-of-type { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_links div:last-of-type a:first-of-type { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_links div:last-of-type a:last-of-type { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } /* third part: "you are viewing your/username's list" */ #mal_cs_otherlinks { background-color: #f6e2e3; border-bottom: 1px solid #ecbfc1; } #mal_cs_otherlinks strong { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/lolicles"] { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/lolicles"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks a { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks span { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #ed6c94 !important; text-decoration: none !important; font-size: 10px !important; font-family: ABeeZee !important; font-style: italic; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 1px solid #ecbfc1 !important; } #mal_cs_pic img[src*="http://cdn.myanimelist.net/images/list-top-logo.gif"] { width:0; height: 40px; padding-right: 162px; background:transparent url(http://i.imgur.com/EpBZpAG.png) top left no-repeat; } #mal_cs_pic { background-color: #f6e2e3; border-bottom: 1px solid #ecbfc1; } #searchBox { padding-right: 10px !important; width: 145px !important; } #searchListButton { display: none; } /* top menu bar full customization end */ .status_selected { color: #ed6c94; background-color: rgba(242,217,219,0.5); padding: 5px; border-bottom: 1px solid; border-color: #ecbfc1; font-family: Leckerli One; font-size: 12px; } .status_not_selected { color: #ed6c94; background-color: rgba(242,217,219,0.5); padding: 5px; border-bottom: 1px solid; border-color: #ecbfc1; font-family: Leckerli One; font-size: 12px; } .status_not_selected a { color: #ed6c94; } a:hover { text-decoration: underline; } .status_selected a { color: #ed6c94; } a:hover { text-decoration: underline; } /* do not remove this */ #copyright:before { content: "List style by blingbling@mal ; Chobits wallpaper by Yamionpu |"; } #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; } body { background-size: cover; } |
Nov 22, 2014 11:18 AM
#2413
Ok I tried doing this myself for several hours but I couldn't get it right. I also tried using the guides but still couldn't understand it. I'm trying to make a Cardcaptor Sakura layout. I used the Little Busters Layout and tried to fix it to fit to that anime. my main problem so far is every time i try to edit the catagory links the other images reset Before I request it I want to try to do it myself Heres the layout in case you never saw i or don't remember. (In Spoiler) @import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/TopBarReduxGreen.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://fonts.googleapis.com/css?family=Autour+One"; @import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://www.emptyblue.it/data/wallpaper/LittleBusters/little_busters_everyone.jpg"); background-position: 0 83%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Autour One; } #inlineContent { background-image: url(""); background-repeat: no-repeat no-repeat; display: inline-block !important; height: 3000px !important; left: 0 !important; margin: auto !important; position: fixed; top: 0 !important; width: 3000px !important; z-index: -4 !important; } #list_surround { background-attachment: scroll; background-image: url("http://i.imgur.com/wQOU6p5.png"); background-position: 50% 16%; background-repeat: no-repeat no-repeat; background-size: 800px auto; font-size: 13px; height: 250px; left: 0; margin: 0 auto; padding-bottom: 10px; padding-top: 283px; position: absolute; right: 0; top: 21px; width: 900px; } .td1, .td2 { background-color: rgba(119, 177, 137, 0.6); height: 65px; padding: 2px; } tr:hover [class^="td"] { background-color: rgba(38, 135, 252, 0.7); transition: all 0.4s linear 0s; } a, .table_header, .category_totals { color: white; text-shadow: none; } a:hover { text-decoration: underline; text-shadow: 1px 2px 3px black !important; } .table_header a { color: white; } .table_header { background-color: rgba(79, 124, 55, 0.8); padding: 3px; text-align: center; } .table_header:nth-of-type(3) { padding-right: 9px; text-align: center; } .table_header:first-of-type { border-top-left-radius: 10px; } .table_header:nth-of-type(2) { padding-left: 39px; text-align: left; z-index: 6; } .table_header:nth-of-type(4) { padding-right: 5px; } .table_header:nth-of-type(5) { border-top-right-radius: 10px; padding-right: 7px; } .category_totals { background-color: rgba(79, 124, 55, 0.8); border-radius: 0 0 10px 10px; height: 40px; padding: 3px; text-align: center; } .td1:nth-of-type(1), .td2:nth-of-type(1) { color: white; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 42px; text-align: left; vertical-align: top; width: 639px; } .td1:nth-of-type(3), .td2:nth-of-type(3) { color: white; padding-right: 11px !important; vertical-align: top; } .td1:nth-of-type(4), .td2:nth-of-type(4) { color: white; padding-right: 10px; vertical-align: top; } .td1:nth-of-type(5), .td2:nth-of-type(5) { color: white; padding-right: 8px; vertical-align: top; } .animetitle + small { color: yellow; font-size: 12px !important; font-weight: bold; left: 4%; margin-top: 66px; padding-right: 2px; text-overflow: ellipsis; z-index: 1; } [cellspacing="0"] { line-height: 17px; } .category_totals:hover { background-color: rgba(196, 30, 14, 0.7); color: #FFFFFF; } #grand_totals { background-color: rgba(79, 124, 55, 0.8); border: 0 none; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px 0 white inset; color: #FFFFFF; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; font-size: 0; height: 113px; width: 263px; } .status_selected { display: block; } .status_not_selected { display: block; } .status_not_selected { opacity: 0.7; } .status_not_selected:hover { color: transparent; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-clip: padding-box !important; background-color: transparent; background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: 100% auto; border: 1px solid transparent; border-radius: 10px 10px 10px 10px; display: block; left: -450px; padding: 0; position: absolute; top: 60px; width: 263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 100% 20%; top: 180px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 0 40%; top: 300px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 100% 60%; top: 420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 0 80%; top: 540px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 100% 100%; top: 660px; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/UTtMcvh.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/xqwnTt5.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/80gqkum.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/xMvAM2j.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/wfRvQHM.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .hide { background-color: rgba(248, 162, 200, 0.7); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 5px 5px 5px 5px; display: inline-block !important; height: 55px; margin-left: 30px; margin-top: -61px; position: absolute; transition: all 0.25s ease-in-out 0s; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px white; margin-left: -218px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 20; } .hide:hover:after { background: none repeat scroll 0 0 transparent; content: " "; height: 65px; left: 42px; position: absolute; top: 0; width: 247px; z-index: 20; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent !important; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-radius: 10px 10px 10px 10px; color: white; display: inline-block; font-family: Patrick Hand SC; font-size: 14px; height: 50px; left: 89px; line-height: 16px !important; margin-left: -16px; margin-top: 18px; padding: 5px; position: absolute; width: 740px; z-index: 2; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } .td1 div, .td2 div { color: transparent; padding-left: 4px; } .td1 div small a:first-of-type, .td2 div small a:first-of-type { color: white; float: right; position: relative; right: 23px; top: 0; } .td1 div small a:last-of-type, .td2 div small a:last-of-type { color: transparent; display: none; float: right; position: relative; right: 59px; } #copyright, #copyright:hover { background-color: rgba(79, 124, 55, 0.8); border-radius: 10px 10px 10px 10px; bottom: 0; color: white; padding: 4px; width: 100%; } #copyright:before { color: white; content: " Original Design by TheHolyPotato, redesigned by SylakentH_"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } @media all and (max-device-width: 1366px){ #list_surround { left: 300px !important; width: 750px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { margin-top: 25px; width: 640px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { width: 517px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -400px; } } Here's what I did in (spoiler) Here's the Code so far (in spoiler) @import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/TopBarReduxGreen.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://fonts.googleapis.com/css?family=Autour+One"; @import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url(http://i.imgur.com/qOz6R9B.jpg?1); background-position: 0 83%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Autour One; } #inlineContent { background-image: url(""); background-repeat: no-repeat no-repeat; display: inline-block !important; height: 3000px !important; left: 0 !important; margin: auto !important; position: fixed; top: 0 !important; width: 3000px !important; z-index: -4 !important; } #list_surround { background-attachment: scroll; background-image: url("http://i.imgur.com/qOz6R9B.jpg?1"); background-position: 50% 16%; background-repeat: no-repeat no-repeat; background-size: 800px auto; font-size: 13px; height: 250px; left: 0; margin: 0 auto; padding-bottom: 10px; padding-top: 283px; position: absolute; right: 0; top: 21px; width: 900px; } .td1, .td2 { background-color: rgba(119, 177, 137, 0.6); height: 65px; padding: 2px; } tr:hover [class^="td"] { background-color: rgba(38, 135, 252, 0.7); transition: all 0.4s linear 0s; } a, .table_header, .category_totals { color: white; text-shadow: none; } a:hover { text-decoration: underline; text-shadow: 1px 2px 3px black !important; } .table_header a { color: white; } .table_header { background-color: rgba(79, 124, 55, 0.8); padding: 3px; text-align: center; } .table_header:nth-of-type(3) { padding-right: 9px; text-align: center; } .table_header:first-of-type { border-top-left-radius: 10px; } .table_header:nth-of-type(2) { padding-left: 39px; text-align: left; z-index: 6; } .table_header:nth-of-type(4) { padding-right: 5px; } .table_header:nth-of-type(5) { border-top-right-radius: 10px; padding-right: 7px; } .category_totals { background-color: rgba(79, 124, 55, 0.8); border-radius: 0 0 10px 10px; height: 40px; padding: 3px; text-align: center; } .td1:nth-of-type(1), .td2:nth-of-type(1) { color: white; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 42px; text-align: left; vertical-align: top; width: 639px; } .td1:nth-of-type(3), .td2:nth-of-type(3) { color: white; padding-right: 11px !important; vertical-align: top; } .td1:nth-of-type(4), .td2:nth-of-type(4) { color: white; padding-right: 10px; vertical-align: top; } .td1:nth-of-type(5), .td2:nth-of-type(5) { color: white; padding-right: 8px; vertical-align: top; } .animetitle + small { color: yellow; font-size: 12px !important; font-weight: bold; left: 4%; margin-top: 66px; padding-right: 2px; text-overflow: ellipsis; z-index: 1; } [cellspacing="0"] { line-height: 17px; } .category_totals:hover { background-color: rgba(196, 30, 14, 0.7); color: #FFFFFF; } #grand_totals { background-color: rgba(79, 124, 55, 0.8); border: 0 none; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px 0 white inset; color: #FFFFFF; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; font-size: 0; height: 113px; width: 263px; } .status_selected { display: block; } .status_not_selected { display: block; } .status_not_selected { opacity: 0.7; } .status_not_selected:hover { color: transparent; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-clip: padding-box !important; background-color: transparent; background-image: url("http://i.imgur.com/YfERrD4.jpg"); background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: 100% auto; border: 1px solid transparent; border-radius: 10px 10px 10px 10px; display: block; left: -450px; padding: 0; position: absolute; top: 60px; width: 263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 100% 20%; top: 180px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 0 40%; top: 300px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 100% 60%; top: 420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 0 80%; top: 540px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i.imgur.com/lLZjlP8.png"); background-position: 100% 100%; top: 660px; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/UTtMcvh.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/7laZu5p.jpg"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/80gqkum.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/xMvAM2j.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/wfRvQHM.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .hide { background-color: rgba(248, 162, 200, 0.7); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 5px 5px 5px 5px; display: inline-block !important; height: 55px; margin-left: 30px; margin-top: -61px; position: absolute; transition: all 0.25s ease-in-out 0s; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px white; margin-left: -218px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 20; } .hide:hover:after { background: none repeat scroll 0 0 transparent; content: " "; height: 65px; left: 42px; position: absolute; top: 0; width: 247px; z-index: 20; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent !important; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-radius: 10px 10px 10px 10px; color: white; display: inline-block; font-family: Patrick Hand SC; font-size: 14px; height: 50px; left: 89px; line-height: 16px !important; margin-left: -16px; margin-top: 18px; padding: 5px; position: absolute; width: 740px; z-index: 2; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } .td1 div, .td2{ color: transparent; padding-left: 4px; } .td1small a:first-of-type, .td2small a:first-of-type { color: white; float: right; position: relative; right: 23px; top: 0; } .td1small a:last-of-type, .td2small a:last-of-type { color: transparent; display: none; float: right; position: relative; right: 59px; } #copyright, #copyright:hover { background-color: rgba(79, 124, 55, 0.8); border-radius: 10px 10px 10px 10px; bottom: 0; color: white; padding: 4px; width: 100%; } #copyright:before { color: white; content: " Original Design by TheHolyPotato, redesigned by SylakentH_"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } @media all and (max-device-width: 1366px){ #list_surround { left: 300px !important; width: 750px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { margin-top: 25px; width: 640px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { width: 517px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -400px; } } in Shishio-kun's catagory link guide here http://myanimelist.net/forum/?topicid=416069 it says to use the pre-made CSS before modifying but I can't figure out where to put it. So my question for now is where do I put the code that she said to put in first. I'm assuming that will solve my problem. So if anyone knows where to put the code in that would be a great help. Please and thank you! Edit: I'm going to use a different theme until I get my answer just so people know |
AyumeLoveNov 22, 2014 11:26 AM
[center]Me: [center]Clubs I'm In: |
Nov 22, 2014 1:07 PM
#2414
AyumeLove said: my main problem so far is every time i try to edit the catagory links the other images reset Let me guess. You are pasting the code directly to "Advanced Style CSS Editor" in the options. If yes, don't. MAL is terrible with handling stylesheets. You commence changes, then you save. Then you reopen your stylesheet and for whatever reason it loads the old one not the new one and when you save it again your previous changes are reversed. It is a mess. Try hosting your stylesheet on dropbox or on other server. Otherwise it will drive you crazy. |
Nov 23, 2014 5:22 AM
#2415
seaven said: AyumeLove said: my main problem so far is every time i try to edit the catagory links the other images reset Let me guess. You are pasting the code directly to "Advanced Style CSS Editor" in the options. If yes, don't. MAL is terrible with handling stylesheets. You commence changes, then you save. Then you reopen your stylesheet and for whatever reason it loads the old one not the new one and when you save it again your previous changes are reversed. It is a mess. Try hosting your stylesheet on dropbox or on other server. Otherwise it will drive you crazy. Thanks that's exactly what I'm doing. I think I got it now. |
[center]Me: [center]Clubs I'm In: |
Nov 23, 2014 11:44 AM
#2416
TripleSRank said: Is it possible to change the "more" link for each anime in one's list to display text placed in the comments form only, rather than the entire extended info on the anime (such as the Rating/Fansub Group/Storage/Rewatch Value/etc.)? I'd like to change it to only show text I've placed in the comments section so I can place mini-reviews there and use the tag section for... well, tags and other stuff. Bumping question. The field selectors are td.td1.borderRBL and td.td2.borderRBL, but I'm looking to replace text rather than hide the text or remove the field. I don't actually know how to replace text in the first place (though I guess I could figure it out with more digging); however, referencing a variable field (that can be edited) is what I'm thinking will be more difficult to do- I haven't the slightest clue how to do so, or even if it can be done. I'd rather not bother digging around more if the end result isn't possible, so: Is this possible? (And, if you don't mind:) How do I do so? |
Nov 24, 2014 2:48 PM
#2417
Hey Guy's! Quick question, What is the most common size for Member card's? |
Nov 24, 2014 3:36 PM
#2418
ZmBzRALIVE said: Hey Guy's! Quick question, What is the most common size for Member card's? Answered the same question for you recently already- most cards are around 240 x 360, and don't usually abstain from that by more than 40px You can also look at sizes yourself with right click- image info or just drag the card into a program and read the dimensions |
Nov 24, 2014 5:18 PM
#2419
Shishio-kun said: ZmBzRALIVE said: Hey Guy's! Quick question, What is the most common size for Member card's? Answered the same question for you recently already- most cards are around 240 x 360, and don't usually abstain from that by more than 40px You can also look at sizes yourself with right click- image info or just drag the card into a program and read the dimensions Ah! Sorry I forgot ^.^ Thank's once again :P |
Nov 28, 2014 4:02 PM
#2420
I want to embed a video into my profile layout. I was wondering. Is there any way I can resize an embedded youtube video? I don't want it to be too big. |
"Be the change you wish to see in the world." |
Nov 28, 2014 4:15 PM
#2421
Toarujisuru said: I want to embed a video into my profile layout. I was wondering. Is there any way I can resize an embedded youtube video? I don't want it to be too big. If You don't mind can You PM Me the Embed code? I'll fix it for You c: |
Nov 28, 2014 7:46 PM
#2422
hey .. I'm having a problem with the custom categories section ... I tried several things to fix it but I don't know how .. here's what I wanted it to look like what it ended up looking like :// and you can see how horrible it looks like .. a whole mess.. you can see it here http://myanimelist.net/mangalist/LoveSong&status=1&order=0 here's my full codes @import"https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSLeftFixed.css"; /* // Self-explanatory */ BODY { background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/bgbig.png), url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/mangalisthkbg.png); background-attachment: fixed; background-repeat: no-repeat, repeat; background-position: right bottom, right top; color: #ffffff; font-size: 10.00px; font-family: Verdana, Arial; background-color: #ffffff; } /* // Determines the positioning of your list */ #list_surround { position: absolute !important; left: 40px !important; width: 620px; } /* // Determines the positioning of my header */ div#list_surround { margin: 0 auto; padding-top: ; width: 570px; background: url() no-repeat; } /* // All links on your list */ a { color: #ffffff; text-decoration: none; } a:visited { color: #7e4918; text-decoration: none; } a:hover { color: #a76120; text-decoration: none; } /* // Alternating row color 1 */ .td1 { color: #ffffff; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #edd893; padding: 2px; background-color: #edd893; } /* // Alternating row color 2 */ .td2 { color: #ffffff; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #edd893; padding: 2px; background-color: #edd893; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: #be8507; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #edd893; background-color: #edd893; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: #be8507 } .table_headerLink:Visited { color: #be8507; } .table_headerLink:Hover { color: #be8507; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: dashed; color: #transparent; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* CUSTOM CATEGORY LINKS These codes control the 6 links to your list categories. See this page for further info on altering the background or moving the links: http://myanimelist.net/forum/?topicid=416069 Also whenever you customize one of the link codes, it can apply some of its changes to all the other parts after it, so you will need to customize those proceeding parts on their own (except for LEFT OVER BOXES). */ /* CURRENTLY WATCHING/READING LINK */ .status_selected a, .status_not_selected a { background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_01.gif) no-repeat scroll 0 0 transparent !important; padding-left: 20px; padding-top: 10px; padding-bottom: 0px; position: fixed; margin:; margin-top: 0px; left: 20px; bottom: 1 px; } /* COMPLETED LINK */ .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_02.gif) no-repeat scroll 0 0 transparent !important; padding-left: 20px; padding-top: 10px; padding-bottom: 0px; position: fixed; margin:; margin-top: 0px; left: 188px; bottom: ; } /* ON HOLD LINK */ .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_03.gif) no-repeat scroll 0 0 transparent !important; padding-left: ; padding-top: ; padding-bottom: ; position: fixed; left: 277px;; bottom: ; } /* DROPPED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_04.gif) no-repeat scroll 0 0 transparent !important; padding-left: ; padding-top: ; padding-bottom: ; position: fixed; left: 350px;; bottom: ; } /* PLANNED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_05.gif) no-repeat scroll 0 0 transparent !important; padding-left: ; padding-top: ; padding-bottom: ; position: fixed; left: 426px;; bottom: ; } /* ALL ANIME/MANGA LINK */ .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_06.png) no-repeat scroll 0 0 transparent !important; padding-left: ; padding-top: ; padding-bottom: ; position: fixed; left: 530 px; bottom: ; } /* LEFT OVER BOXES These are boxes which pad the links that may get left over after customizing your links (depending on the type of list). These codes will remove them from view and don't need to be customized the same as the other links above. */ .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0 0 transparent; border: none; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_title { display: none; } .header_cw {height: 381px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/headerscr.png); background-repeat: no-repeat; } .header_completed {height: 381px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/headersco.png); background-repeat: no-repeat; } .header_onhold {height: 381px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/headersoh.png); background-repeat: no-repeat; } .header_dropped {height: 381px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/headersdr.png); background-repeat: no-repeat; } .header_ptw {height: 381px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/headersptw.png); background-repeat: no-repeat; } .header_title { font-size: 14px; font-weight: bold; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } .category_totals { color: #ffffff; border-top:0px solid #edd893; background-color: #edd893; height: 20px; text-align:center; } #grand_totals { text-align: center; height: 34px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/Untitled-3.png); } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 570px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/Untitled-3.png); } |
Nov 29, 2014 6:59 AM
#2423
LoveSong said: hey .. I'm having a problem with the custom categories section ... I tried several things to fix it but I don't know how .. Find /* CUSTOM CATEGORY LINKS These codes control the 6 links to your list categories. See this page for further info on altering the background or moving the links: http://myanimelist.net/forum/?topicid=416069 Also whenever you customize one of the link codes, it can apply some of its changes to all the other parts after it, so you will need to customize those proceeding parts on their own (except for LEFT OVER BOXES). */ /* CURRENTLY WATCHING/READING LINK */ .status_selected a, .status_not_selected a { background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_01.gif) no-repeat scroll 0 0 transparent !important; padding-right: 148px; padding-top: 10px; padding-bottom: 0px; position: fixed; margin:auto; margin-top: 0px; left: 20px; right:; top: ; bottom: 0px; } /* COMPLETED LINK */ .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_02.gif) no-repeat scroll 0 0 transparent !important; position: fixed; margin:; margin-top: 0px; left: 188px; bottom: ; } /* ON HOLD LINK */ .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_03.gif) no-repeat scroll 0 0 transparent !important; padding-left: 100px; padding-top: ; padding-bottom: ; position: fixed; left: 277px;; bottom: ; } /* DROPPED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_04.gif) no-repeat scroll 0 0 transparent !important; padding-left: 100px; padding-top: ; padding-bottom: ; position: fixed; left: 350px;; bottom: ; } /* PLANNED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_05.gif) no-repeat scroll 0 0 transparent !important; padding-left: 100px; padding-top: ; padding-bottom: ; position: fixed; left: 426px;; bottom: ; } /* ALL ANIME/MANGA LINK */ .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_06.png) no-repeat scroll 0 0 transparent !important; padding-left: ; padding-top: ; padding-bottom: ; position: fixed; left: 530 px; bottom: ; } /* LEFT OVER BOXES These are boxes which pad the links that may get left over after customizing your links (depending on the type of list). These codes will remove them from view and don't need to be customized the same as the other links above. */ .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0 0 transparent; border: none; } replace with: #list_surround table:first-of-type { position: fixed; width: auto; bottom: 0; } .status_not_selected a, .status_selected a { display: inline-block !important; font-size: 0px; height: 24px; margin: 0 !important; padding: 0!important; z-index: 1; } /* Currently watching */ .status_not_selected > a[href*="status=1"], .status_not_selected > a[href*="status=1"]:hover, .status_not_selected > a[href*="status=1"]:active, .status_selected > a[href*="status=1"] { width: 168px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_01.gif); background-repeat: no-repeat; } .status_not_selected > a[href*="status=1"]:hover, .status_not_selected > a[href*="status=1"]:active, .status_selected > a[href*="status=1"] { opacity: 0.9; } /* Completed */ .status_not_selected > a[href*="status=2"], status_not_selected > a[href*="status=2"]:hover, .status_not_selected > a[href*="status=2"]:active, .status_selected > a[href*="status=2"] { width: 89px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_02.gif); background-repeat: no-repeat; } .status_not_selected > a[href*="status=2"]:hover, .status_not_selected > a[href*="status=2"]:active, .status_selected > a[href*="status=2"] { opacity: 0.9; } /* On Hold */ .status_not_selected > a[href*="status=3"], .status_not_selected > a[href*="status=3"]:hover, .status_not_selected > a[href*="status=3"]:active, .status_selected > a[href*="status=3"] { width: 73px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_03.gif); background-repeat: no-repeat; margin-left: -2px !important; } .status_not_selected > a[href*="status=3"]:hover, .status_not_selected > a[href*="status=3"]:active, .status_selected > a[href*="status=3"] { opacity:0.9; } /* Dropped */ .status_not_selected > a[href*="status=4"], .status_not_selected > a[href*="status=4"]:hover, .status_not_selected > a[href*="status=4"]:active, .status_selected > a[href*="status=4"] { width: 76px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_04.gif); background-repeat: no-repeat; margin-left: -3px !important; } .status_not_selected > a[href*="status=4"]:hover, .status_not_selected > a[href*="status=4"]:active, .status_selected > a[href*="status=4"] { opacity:0.9; } /* plan to watch */ .status_not_selected > a[href*="status=6"], .status_not_selected > a[href*="status=6"]:hover, .status_not_selected > a[href*="status=6"]:active, .status_selected > a[href*="status=6"] { width: 104px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_05.gif); background-repeat: no-repeat; margin-left: -13px !important; } .status_not_selected > a[href*="status=6"]:hover, .status_not_selected > a[href*="status=6"]:active, .status_selected > a[href*="status=6"] { opacity:0.9; } /*All */ .status_not_selected > a[href*="status=7"], .status_not_selected > a[href*="status=7"]:hover, .status_not_selected > a[href*="status=7"]:active, .status_selected > a[href*="status=7"] { width: 104px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_06.png); background-repeat: no-repeat; margin-left: -35px !important; } .status_not_selected > a[href*="status=7"]:hover, .status_not_selected > a[href*="status=7"]:active, .status_selected > a[href*="status=7"] { opacity:0.9; } Note: You have some padding/margin issues there, I am to lazy to look into that so I just added negative marging left to align everything Note 2: I added opacity on hover. If you don't like it remove those sections of code. |
Nov 29, 2014 1:26 PM
#2424
seaven said: LoveSong said: hey .. I'm having a problem with the custom categories section ... I tried several things to fix it but I don't know how .. Find /* CUSTOM CATEGORY LINKS These codes control the 6 links to your list categories. See this page for further info on altering the background or moving the links: http://myanimelist.net/forum/?topicid=416069 Also whenever you customize one of the link codes, it can apply some of its changes to all the other parts after it, so you will need to customize those proceeding parts on their own (except for LEFT OVER BOXES). */ /* CURRENTLY WATCHING/READING LINK */ .status_selected a, .status_not_selected a { background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_01.gif) no-repeat scroll 0 0 transparent !important; padding-right: 148px; padding-top: 10px; padding-bottom: 0px; position: fixed; margin:auto; margin-top: 0px; left: 20px; right:; top: ; bottom: 0px; } /* COMPLETED LINK */ .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_02.gif) no-repeat scroll 0 0 transparent !important; position: fixed; margin:; margin-top: 0px; left: 188px; bottom: ; } /* ON HOLD LINK */ .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_03.gif) no-repeat scroll 0 0 transparent !important; padding-left: 100px; padding-top: ; padding-bottom: ; position: fixed; left: 277px;; bottom: ; } /* DROPPED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_04.gif) no-repeat scroll 0 0 transparent !important; padding-left: 100px; padding-top: ; padding-bottom: ; position: fixed; left: 350px;; bottom: ; } /* PLANNED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_05.gif) no-repeat scroll 0 0 transparent !important; padding-left: 100px; padding-top: ; padding-bottom: ; position: fixed; left: 426px;; bottom: ; } /* ALL ANIME/MANGA LINK */ .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_06.png) no-repeat scroll 0 0 transparent !important; padding-left: ; padding-top: ; padding-bottom: ; position: fixed; left: 530 px; bottom: ; } /* LEFT OVER BOXES These are boxes which pad the links that may get left over after customizing your links (depending on the type of list). These codes will remove them from view and don't need to be customized the same as the other links above. */ .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0 0 transparent; border: none; } replace with: #list_surround table:first-of-type { position: fixed; width: auto; bottom: 0; } .status_not_selected a, .status_selected a { display: inline-block !important; font-size: 0px; height: 24px; margin: 0 !important; padding: 0!important; z-index: 1; } /* Currently watching */ .status_not_selected > a[href*="status=1"], .status_not_selected > a[href*="status=1"]:hover, .status_not_selected > a[href*="status=1"]:active, .status_selected > a[href*="status=1"] { width: 168px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_01.gif); background-repeat: no-repeat; } .status_not_selected > a[href*="status=1"]:hover, .status_not_selected > a[href*="status=1"]:active, .status_selected > a[href*="status=1"] { opacity: 0.9; } /* Completed */ .status_not_selected > a[href*="status=2"], status_not_selected > a[href*="status=2"]:hover, .status_not_selected > a[href*="status=2"]:active, .status_selected > a[href*="status=2"] { width: 89px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_02.gif); background-repeat: no-repeat; } .status_not_selected > a[href*="status=2"]:hover, .status_not_selected > a[href*="status=2"]:active, .status_selected > a[href*="status=2"] { opacity: 0.9; } /* On Hold */ .status_not_selected > a[href*="status=3"], .status_not_selected > a[href*="status=3"]:hover, .status_not_selected > a[href*="status=3"]:active, .status_selected > a[href*="status=3"] { width: 73px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_03.gif); background-repeat: no-repeat; margin-left: -2px !important; } .status_not_selected > a[href*="status=3"]:hover, .status_not_selected > a[href*="status=3"]:active, .status_selected > a[href*="status=3"] { opacity:0.9; } /* Dropped */ .status_not_selected > a[href*="status=4"], .status_not_selected > a[href*="status=4"]:hover, .status_not_selected > a[href*="status=4"]:active, .status_selected > a[href*="status=4"] { width: 76px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_04.gif); background-repeat: no-repeat; margin-left: -3px !important; } .status_not_selected > a[href*="status=4"]:hover, .status_not_selected > a[href*="status=4"]:active, .status_selected > a[href*="status=4"] { opacity:0.9; } /* plan to watch */ .status_not_selected > a[href*="status=6"], .status_not_selected > a[href*="status=6"]:hover, .status_not_selected > a[href*="status=6"]:active, .status_selected > a[href*="status=6"] { width: 104px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_05.gif); background-repeat: no-repeat; margin-left: -13px !important; } .status_not_selected > a[href*="status=6"]:hover, .status_not_selected > a[href*="status=6"]:active, .status_selected > a[href*="status=6"] { opacity:0.9; } /*All */ .status_not_selected > a[href*="status=7"], .status_not_selected > a[href*="status=7"]:hover, .status_not_selected > a[href*="status=7"]:active, .status_selected > a[href*="status=7"] { width: 104px; display: inline-block; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/hkccsmal/hklist_06.png); background-repeat: no-repeat; margin-left: -35px !important; } .status_not_selected > a[href*="status=7"]:hover, .status_not_selected > a[href*="status=7"]:active, .status_selected > a[href*="status=7"] { opacity:0.9; } Note: You have some padding/margin issues there, I am to lazy to look into that so I just added negative marging left to align everything Note 2: I added opacity on hover. If you don't like it remove those sections of code. thank you so very much!! but I did as you said and now the whole section is gone somehow!?!?? I know there're lots of issues since I took my anime list css which already had some issues that needs to be fixed and started changing in it. edited to add: now that I changed the top bar they showed up at the top but not like what I want it to be.. |
LoveSongNov 29, 2014 3:35 PM
Nov 29, 2014 6:25 PM
#2425
LoveSong said: thank you so very much!! but I did as you said and now the whole section is gone somehow!?!?? I know there're lots of issues since I took my anime list css which already had some issues that needs to be fixed and started changing in it. edited to add: now that I changed the top bar they showed up at the top but not like what I want it to be.. There are two problems here. One, you edited it wrong: http://puu.sh/daSvO/7237167652.png You have parts of the old code, some of my code is missing and some parts that are there are commented out. and the second problem: all '>' symbols are changed to '>' you have change them back to > when you fix those problems, it looks like this: http://puu.sh/daT8G/290a12494c.jpg I assumed you want this at the bottom of the page, because one of your screen shots shows it at the bottom, if not I will tell you how to reposition it. |
seavenDec 4, 2014 10:43 AM
Nov 30, 2014 11:25 AM
#2426
seaven said: There are two problems here. One, you edited it wrong: http://puu.sh/daSvO/7237167652.png You have parts of the old code, some of my code is missing and some parts that are there are commented out. and the second problem: all '>' symbols are changed to '>' you have change them back to > when you fix those problems, it looks like this: http://puu.sh/daT8G/290a12494c.jpg I assumed you want this at the bottom of the page, because one of your screen shots shows it at the bottom, if not I will tell you how to reposition it. thank you again, I feel like there are lots of issues with codes and my luck isn't working with this one.. no matter how much I try to fix it it doesn't seem to be working.. and it's driving me crazy. I tried to fix it in both firefox and chrome and yet still it doesn't show up :(((( :/// for now until I re-do the whole codes I'll stick with the show all .. and that's exactly how I wanted it to look like .. so thank you very much again.. |
Nov 30, 2014 11:52 AM
#2427
@LoveSong MAL CSS box screws up >'s, you have to @import them from Dropbox, but just try to remove them and see if it works. MAL CSS box also screws up all the code mixing old and new pieces, I typically do it just like this: - Do all the edits - Ctrl+A, Ctrl+C - Copy all the code - Submit style - Ctrl+A, Ctrl+V - Paste into reloaded box - Submit again |
Dec 1, 2014 10:19 AM
#2428
@VeriTi i tried removing them but it didn't work, I guess I'll @import them and see if it'll work.. yup i noticed that.. it keeps messing with codes, once when i was trying fixing it it deleted all the headers images codes ://.. @seaven & @VeriTi thank you both so very much, it finally worked using the importing ^_^ |
LoveSongDec 1, 2014 3:42 PM
Dec 1, 2014 6:28 PM
#2429
does anyone know how to spoiler all the comments they get on their profile? here's an example i saw [spoiler] |
KOmeijiCrusherDec 1, 2014 6:33 PM
Dec 1, 2014 10:47 PM
#2430
Hello, I was wondering what is the estimated size for a "Side way's" card such as ArtistJenny's Cards... |
Dec 3, 2014 1:52 PM
#2431
Roarshaq said: does anyone know how to spoiler all the comments they get on their profile? here's an example i saw [spoiler] I did this once, iirc you use spoiler codes with the BBcode glitch: http://myanimelist.net/forum/?topicid=399423&show=0 It'd be faster to find out how again if you could just link me to the profile that used that trick and I can just rip it from their code |
Dec 3, 2014 1:58 PM
#2432
ZmBzRALIVE said: Hello, I was wondering what is the estimated size for a "Side way's" card such as ArtistJenny's Cards... Use the right-click View Image Info to find the dimensions of her or other ppl's horiztonal cards. Or you reverse the height and width on the average card size (360px width, 240px height) |
Dec 6, 2014 12:03 PM
#2433
Shishio-kun said: Roarshaq said: does anyone know how to spoiler all the comments they get on their profile? here's an example i saw [spoiler] I did this once, iirc you use spoiler codes with the BBcode glitch: http://myanimelist.net/forum/?topicid=399423&show=0 It'd be faster to find out how again if you could just link me to the profile that used that trick and I can just rip it from their code Alright here's the profile I saw it from http://myanimelist.net/profile/Princess |
Dec 6, 2014 3:36 PM
#2434
Roarshaq said: does anyone know how to spoiler all the comments they get on their profile? ok I added the spoiler trick to the glitch topic, and opened a separate topic on it http://myanimelist.net/forum/?topicid=1320139 |
Dec 10, 2014 12:47 AM
#2435
I just made my first list and I'm almost done. There is one problem though. I'll try to explain it properly but English is not my first language so I'm sorry if it is hard to understand. Basically, when the Currently Watching category is the active link, all the other category menu except "All Anime" uses the :hover code instead of their normal ones. When the other category links are active, all the category menu except the ones above them use the :hover code. How do I fix this? My MAL: http://myanimelist.net/animelist/Anonymoose-N The CSS : https://dl.dropboxusercontent.com/s/pceenbiirp7q8s1/Anonymoose-N.css?dl=0 EDIT : I also want to use the :hover image when the chosen category is active. How do I do this? |
Dec 10, 2014 1:43 AM
#2436
Anonymoose-N said: I just made my first list and I'm almost done. There is one problem though. I'll try to explain it properly but English is not my first language so I'm sorry if it is hard to understand. Basically, when the Currently Watching category is the active link, all the other category menu except "All Anime" uses the :hover code instead of their normal ones. When the other category links are active, all the category menu except the ones above them use the :hover code. How do I fix this? My MAL: http://myanimelist.net/animelist/Anonymoose-N The CSS : https://dl.dropboxusercontent.com/s/pceenbiirp7q8s1/Anonymoose-N.css?dl=0 EDIT : I also want to use the :hover image when the chosen category is active. How do I do this? You're missing :hover on many selectors that I think you meant to have hover effects. Like in .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a:hover The first two selectors .status_selected + .status_not_selected a, and .status_not_selected + .status_selected a, also need the :hover at the end before the comma, if they're meant to apply the completed hover image to them too on hover. On the second thing you have to know and code the selector with the hover. Like .status_not_selected + .status_selected a is the active button for completed button when on the completed page. So you'd have to code this selector with the hover image you want. There's easier selectors to use now for the category buttons too .status_selected:nth-of-type(1) would be for Current when on the current page. .status_not_selected:nth-of-type(1) for current when not on the Current page, and so forth. Goes up to 6. |
Dec 10, 2014 3:39 AM
#2437
Shishio-kun said: Anonymoose-N said: I just made my first list and I'm almost done. There is one problem though. I'll try to explain it properly but English is not my first language so I'm sorry if it is hard to understand. Basically, when the Currently Watching category is the active link, all the other category menu except "All Anime" uses the :hover code instead of their normal ones. When the other category links are active, all the category menu except the ones above them use the :hover code. How do I fix this? My MAL: http://myanimelist.net/animelist/Anonymoose-N The CSS : https://dl.dropboxusercontent.com/s/pceenbiirp7q8s1/Anonymoose-N.css?dl=0 EDIT : I also want to use the :hover image when the chosen category is active. How do I do this? You're missing :hover on many selectors that I think you meant to have hover effects. Like in .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a:hover The first two selectors .status_selected + .status_not_selected a, and .status_not_selected + .status_selected a, also need the :hover at the end before the comma, if they're meant to apply the completed hover image to them too on hover. On the second thing you have to know and code the selector with the hover. Like .status_not_selected + .status_selected a is the active button for completed button when on the completed page. So you'd have to code this selector with the hover image you want. There's easier selectors to use now for the category buttons too .status_selected:nth-of-type(1) would be for Current when on the current page. .status_not_selected:nth-of-type(1) for current when not on the Current page, and so forth. Goes up to 6. I got it working the way I want it to for the currently watching and all anime category. When the others are active, the all anime category menu stays black even if I added :hover before every comma. What do I do now? https://dl.dropboxusercontent.com/s/pceenbiirp7q8s1/Anonymoose-N.css?dl=0 |
Enn-VeeDec 10, 2014 3:45 AM
Dec 10, 2014 3:48 AM
#2438
Anonymoose-N said: this should do it (change in red)Shishio-kun said: Anonymoose-N said: I just made my first list and I'm almost done. There is one problem though. I'll try to explain it properly but English is not my first language so I'm sorry if it is hard to understand. Basically, when the Currently Watching category is the active link, all the other category menu except "All Anime" uses the :hover code instead of their normal ones. When the other category links are active, all the category menu except the ones above them use the :hover code. How do I fix this? My MAL: http://myanimelist.net/animelist/Anonymoose-N The CSS : https://dl.dropboxusercontent.com/s/pceenbiirp7q8s1/Anonymoose-N.css?dl=0 EDIT : I also want to use the :hover image when the chosen category is active. How do I do this? You're missing :hover on many selectors that I think you meant to have hover effects. Like in .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a:hover The first two selectors .status_selected + .status_not_selected a, and .status_not_selected + .status_selected a, also need the :hover at the end before the comma, if they're meant to apply the completed hover image to them too on hover. On the second thing you have to know and code the selector with the hover. Like .status_not_selected + .status_selected a is the active button for completed button when on the completed page. So you'd have to code this selector with the hover image you want. There's easier selectors to use now for the category buttons too .status_selected:nth-of-type(1) would be for Current when on the current page. .status_not_selected:nth-of-type(1) for current when not on the Current page, and so forth. Goes up to 6. I got it working the way I want it to for the currently watching and all anime category. When the others are active, the all anime category menu stays black even if I added :hover before every comma. What do I do now? https://dl.dropboxusercontent.com/s/pceenbiirp7q8s1/Anonymoose-N.css?dl=0 /* TOPBAR */ @import "http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css"; /* Anime Cover */ @import "https://f3a7a1b1655de4833e3bed3b1779c5a9d85839f8.googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM"; /* Background */ body { background-attachment: fixed; background-image: url("http://signavatar.com/36637_s.gif"); background-size: cover; } .table_header { background-color: rgba(16, 115, 216, 0.9); } .table_header { border-color: white; border-style: solid; border-width: 1px 0 0 !important; } td.table_header:first-of-type { border-color: white; border-style: solid; border-width: 1px 0 0 1px !important; } td.table_header:last-of-type { border-color: white; border-style: solid; border-width: 1px 1px 0 0 !important; } .td1:first-of-type, .td2:first-of-type { border-color: white; border-style: solid; border-width: 0 0 0 1px !important; } .td1:last-of-type, .td2:last-of-type { border-color: white; border-style: solid; border-width: 0 1px 0 0 !important; } .category_totals { border-color: white; border-style: solid; border-width: 0 1px 1px !important; } .table_header:last-of-type { border-radius: 0 20px 0 0; } .animetitle, .animetitle:visited { color: white; font-family: Verdana; font-size: 15px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Verdana; font-size: 10px; } #list_surround { left: 100px; width: 50%; } body { background-color: black; background-repeat: no-repeat; } .td1 { background: none repeat scroll 0 0 rgba(85, 156, 218, 0.7) !important; } .td2 { background: none repeat scroll 0 0 rgba(140, 199, 241, 0.7) !important; } .category_totals { background: none repeat scroll 0 0 rgba(16, 115, 216, 0.9) !important; } .td1:nth-of-type(6), .td2:nth-of-type(6) { width: 185px; } .table_header:nth-of-type(6) { width: 150px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { width: 192px; } .table_header:nth-of-type(2) { width: 200px; } #list_surround { background-image: url(""); margin: auto; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: yellow; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url(""); border-width: 0; padding: 2px; } .category_totals { border-radius: 0 0 0 25px; } .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: black; border-width: 0; padding: 2px; } #copyright:after { content: ""; } .status_selected { background-color: black; color: white; padding: 2px; text-decoration: blink; } .status_not_selected { background-color: black; color: white; padding: 2px; } .status_selected a { color: cyan; } .status_not_selected a { color: white; } .thickbox { color: cyan; font-family: fantasy; font-size: 12px; } .header_title { height: 52px; padding: 2px; } .table_header { border-width: 0; font-weight: bold; padding: 2px; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/J54HWKo.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/g3h87eD.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/49ENYEr.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/0bUk0fm.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/pThZhLZ.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0; } .header_title { background-color: transparent !important; } tbody { background-color: transparent; background-image: none; } .header_title { color: transparent !important; font-size: 0 !important; } .status_selected a, .status_not_selected a { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i.imgur.com/nhlNERP.png") !important; background-origin: padding-box !important; background-position: 0 0 !important; background-repeat: no-repeat; background-size: auto auto !important; border: 2px solid #000000; border-radius: 15px; color: transparent; display: block; left: 75%; margin-left: 60px; margin-top: 60px; padding-right: 145px; padding-top: 65px; position: fixed; top: 0; width: 105px; } .status_selected a, .status_not_selected a:hover { background-image: url("http://i.imgur.com/C9eJuKc.png") !important; } .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i.imgur.com/bDs6nbc.png") !important; background-origin: padding-box !important; background-position: 0 0 !important; background-repeat: no-repeat; background-size: auto auto !important; left: 75%; margin-top: 10px; padding-right: 145px; padding-top: 65px; position: fixed; top: 150px; } .status_selected + .status_not_selected a:hover, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/kYCzntS.png") !important; } .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i.imgur.com/H6eUA0j.png") !important; background-origin: padding-box !important; background-position: 0 0 !important; background-repeat: no-repeat; background-size: auto auto !important; left: 75%; padding-right: 145px; padding-top: 65px; position: fixed; top: 250px; } .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/DntrBi5.png") !important; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i.imgur.com/IXrIxj8.png") !important; background-origin: padding-box !important; background-position: 0 0 !important; background-repeat: no-repeat; background-size: auto auto !important; left: 75%; margin-top: 10px; padding-right: 144px; padding-top: 65px; position: fixed; top: 350px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/UmRazS9.png") !important; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background: url("http://i.imgur.com/4m2KW7c.png") no-repeat scroll 0 0 transparent !important; left: 75%; margin-top: 10px; padding-right: 144px; padding-top: 65px; position: fixed; top: 450px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/jCgrrY2.png") !important; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a[color=red]:hover[/color], .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background: url("http://i.imgur.com/m60nxCu.png") no-repeat scroll 0 0 transparent !important; left: 75%; margin-top: 10px; padding-right: 145px; padding-top: 65px; position: fixed; top: 550px; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/vZqc0dr.png") !important; } .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0 0 transparent; border: medium none; } #inlineContent { background: url("http://i.imgur.com/GgNhZn4.png") no-repeat scroll -4% 0 transparent !important; bottom: -825px !important; display: inline-block !important; height: 1500px !important; left: 0 !important; margin: 0 !important; position: fixed !important; right: 0 !important; width: 5000px !important; z-index: -1 !important; } .hide { background-color: rgba(248, 162, 200, 0.7); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #ffffff; border-radius: 7px 0 7px 7px; display: inline-block !important; height: 55px; margin-left: 33px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px; box-shadow: 0 0 8px 8px rgba(63, 52, 60, 0.55); margin-left: -140px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 1; } .hide:hover:after { background: none repeat scroll 0 0 transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } * { transition: all 0.25s ease-in-out 0s; } .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 62px; padding-left: 42px; } #list_surround:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround:nth-of-type(n+4):hover td:nth-of-type(8) { display:-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover { text-decoration: underline; } tr:hover [class^="td"] { background-color: rgba(27, 116, 210, 0.7) !important; transition: all 0.4s ease 0s; } #list_surround { background-attachment: scroll; background-color: transparent; background-image: url("http://i.imgur.com/u2rw0ET.png"); background-position: 50% 30px; background-repeat: no-repeat no-repeat; font-size: 81.25%; line-height: 1; margin-top: 30px; padding-bottom: 10px; padding-top: 130px; position: absolute; right: 30px !important; } |
Dec 10, 2014 4:21 AM
#2439
Sadly, I tried it and it didn't work. Thanks for trying to help though! EDIT : I'd also like to put the tags under the anime title but I can't find a tutorial for it. Thank you in advance! |
Enn-VeeDec 10, 2014 9:27 AM
Dec 10, 2014 12:24 PM
#2440
Anonymoose-N said: sorry my mistake ('..)Sadly, I tried it and it didn't work. Thanks for trying to help though! EDIT : I'd also like to put the tags under the anime title but I can't find a tutorial for it. Thank you in advance! @import url("http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css"); @import url("https://f3a7a1b1655de4833e3bed3b1779c5a9d85839f8.googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM"); body { background-attachment: fixed; background-image: url("http://signavatar.com/36637_s.gif"); background-size: cover; } .table_header { background-color: rgba(16, 115, 216, 0.9); } .table_header { border-color: white; border-style: solid; border-width: 1px 0px 0px ! important; } td.table_header:first-of-type { border-color: white; border-style: solid; border-width: 1px 0px 0px 1px ! important; } td.table_header:last-of-type { border-color: white; border-style: solid; border-width: 1px 1px 0px 0px ! important; } .td1:first-of-type, .td2:first-of-type { border-color: white; border-style: solid; border-width: 0px 0px 0px 1px ! important; } .td1:last-of-type, .td2:last-of-type { border-color: white; border-style: solid; border-width: 0px 1px 0px 0px ! important; } .category_totals { border-color: white; border-style: solid; border-width: 0px 1px 1px ! important; } .table_header:last-of-type { border-radius: 0px 20px 0px 0px; } .animetitle, .animetitle:visited { color: white; font-family: Verdana; font-size: 15px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Verdana; font-size: 10px; } #list_surround { left: 100px; width: 50%; } body { background-color: black; background-repeat: no-repeat; } .td1 { background: none repeat scroll 0px 0px rgba(85, 156, 218, 0.7) ! important; } .td2 { background: none repeat scroll 0px 0px rgba(140, 199, 241, 0.7) ! important; } .category_totals { background: none repeat scroll 0px 0px rgba(16, 115, 216, 0.9) ! important; } .td1:nth-of-type(6), .td2:nth-of-type(6) { width: 185px; } .table_header:nth-of-type(6) { width: 150px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { width: 192px; } .table_header:nth-of-type(2) { width: 200px; } #list_surround { background-image: url(""); margin: auto; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: yellow; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url(""); border-width: 0px; padding: 2px; } .category_totals { border-radius: 0px 0px 0px 25px; } .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: black; border-width: 0px; padding: 2px; } #copyright:after { content: ""; } .status_selected { background-color: black; color: white; padding: 2px; text-decoration: blink; } .status_not_selected { background-color: black; color: white; padding: 2px; } .status_selected a { color: cyan; } .status_not_selected a { color: white; } .thickbox { color: cyan; font-family: fantasy; font-size: 12px; } .header_title { height: 52px; padding: 2px; } .table_header { border-width: 0px; font-weight: bold; padding: 2px; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0px auto; text-align: center; } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/J54HWKo.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/g3h87eD.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/49ENYEr.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/0bUk0fm.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/pThZhLZ.png"); background-repeat: no-repeat; height: 150px; margin-bottom: 0px; } .header_title { background-color: rgba(0, 0, 0, 0) ! important; } tbody { background-color: transparent; background-image: none; } .header_title { color: rgba(0, 0, 0, 0) ! important; font-size: 0px ! important; } .status_selected a, .status_not_selected a { background-attachment: scroll ! important; background-clip: border-box ! important; background-color: rgba(0, 0, 0, 0) ! important; background-image: url("http://i.imgur.com/nhlNERP.png") ! important; background-origin: padding-box ! important; background-position: 0px 0px ! important; background-repeat: no-repeat; background-size: auto auto ! important; border-radius: 15px; border: 2px solid #000000; color: transparent; display: block; left: 75%; margin-left: 60px; margin-top: 60px; padding-right: 145px; padding-top: 65px; position: fixed; top: 0px; width: 105px; } .status_selected a, .status_not_selected a:hover { background-image: url("http://i.imgur.com/9cPPnCJ.png") ! important; } .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a { background-attachment: scroll ! important; background-clip: border-box ! important; background-color: rgba(0, 0, 0, 0) ! important; background-image: url("http://i.imgur.com/bDs6nbc.png") ! important; background-origin: padding-box ! important; background-position: 0px 0px ! important; background-repeat: no-repeat; background-size: auto auto ! important; left: 75%; margin-top: 10px; padding-right: 145px; padding-top: 65px; position: fixed; top: 150px; } .status_selected + .status_not_selected a:hover, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/P9ISk4e.png") ! important; } .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a { background-attachment: scroll ! important; background-clip: border-box ! important; background-color: rgba(0, 0, 0, 0) ! important; background-image: url("http://i.imgur.com/H6eUA0j.png") ! important; background-origin: padding-box ! important; background-position: 0px 0px ! important; background-repeat: no-repeat; background-size: auto auto ! important; left: 75%; padding-right: 145px; padding-top: 65px; position: fixed; top: 250px; } .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/SuLaI32.png") ! important; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background-attachment: scroll ! important; background-clip: border-box ! important; background-color: rgba(0, 0, 0, 0) ! important; background-image: url("http://i.imgur.com/IXrIxj8.png") ! important; background-origin: padding-box ! important; background-position: 0px 0px ! important; background-repeat: no-repeat; background-size: auto auto ! important; left: 75%; margin-top: 10px; padding-right: 144px; padding-top: 65px; position: fixed; top: 350px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/kKYcOq8.png") ! important; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background: url("http://i.imgur.com/4m2KW7c.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0) ! important; left: 75%; margin-top: 10px; padding-right: 144px; padding-top: 65px; position: fixed; top: 450px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/x3iAh3V.png") ! important; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background: url("http://i.imgur.com/m60nxCu.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0) ! important; left: 75%; margin-top: 10px; padding-right: 145px; padding-top: 65px; position: fixed; top: 550px; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background-image: url("http://i.imgur.com/CIYZ1pa.png") ! important; } .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0px 0px transparent; border: medium none; } #inlineContent { background: url("http://i.imgur.com/GgNhZn4.png") no-repeat scroll -4% 0px rgba(0, 0, 0, 0) ! important; bottom: -825px ! important; display: inline-block ! important; height: 1500px ! important; left: 0px ! important; margin: 0px ! important; position: fixed ! important; right: 0px ! important; width: 5000px ! important; z-index: -1 ! important; } .hide { background-color: rgba(248, 162, 200, 0.7); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px 0px 7px 7px; border: 1px solid #ffffff; display: inline-block ! important; height: 55px; margin-left: 33px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px; box-shadow: 0px 0px 8px 8px rgba(63, 52, 60, 0.55); margin-left: -140px; padding-right: 150px; padding-top: 220px ! important; position: absolute; z-index: 1; } .hide:hover:after { background: none repeat scroll 0px 0px transparent; content: " "; height: 75px; left: 0px; position: absolute; top: 0px; width: 210px; z-index: 20; } * { transition: all 0.25s ease-in-out 0s; } .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 62px; padding-left: 42px; } #list_surround:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround:nth-of-type(n+4):hover td:nth-of-type(8) { } #list_surround small a:last-of-type { display: none ! important; } .animetitle + small { visibility: visible ! important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible ! important; } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible ! important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover { text-decoration: underline; } tr:hover [class^="td"] { background-color: rgba(27, 116, 210, 0.7) ! important; transition: all 0.4s ease 0s; } #list_surround { background-attachment: scroll; background-color: transparent; background-image: url("http://i.imgur.com/u2rw0ET.png"); background-position: 50% 30px; background-repeat: no-repeat no-repeat; font-size: 81.25%; line-height: 1; margin-top: 30px; padding-bottom: 10px; padding-top: 130px; position: absolute; right: 30px ! important; } should do it though. |
Dec 10, 2014 3:19 PM
#2441
It's is still not working unfortunately. The only thing that changed was when All Anime is active, it is no longer using the hover image, which isn't what I intended. I can't seem to find out the cause for this. Thanks again for the help. Question is still up! EDIT : Finally got it working as intended. Now all I need to know is how to put the tags below the anime title. |
Enn-VeeDec 11, 2014 11:42 AM
Dec 18, 2014 4:17 PM
#2442
I got two issues with my list. I'm pretty new to css, so I don't really know the correct terms. I want to make my category links like the currently watching image but I can't figure out how to make an hover options for them. edit: I figured it out from the post above me. Also, how can I make it so the transition out of the category links works like the transition of my list. Basically, it only fades out after the full 1 second. If you put your mouse on the link and quickly move it, it doesn't fade out like my list does. Here's my list: http://myanimelist.net/animelist/Satiriques |
SatiriquesDec 18, 2014 8:51 PM
Dec 18, 2014 8:34 PM
#2443
@Satiriques Background-image does not allow transition by standard. IIRC, however, it works in Chrome and Safari. I don't really think you need the images in this case. You can use plain color, font-family and background-color, since you can animate colors. There is also an interesting approach I discovered. On my list in the category buttons the black part is on image, and the part that changes color is transparent, so it can be set by background-color. I don't think it would work for you though. |
Dec 18, 2014 8:46 PM
#2444
VeriTi said: @Satiriques Background-image does not allow transition by standard. IIRC, however, it works in Chrome and Safari. I don't really think you need the images in this case. You can use plain color, font-family and background-color, since you can animate colors. There is also an interesting approach I discovered. On my list in the category buttons the black part is on image, and the part that changes color is transparent, so it can be set by background-color. I don't think it would work for you though. Alright, I guess I'll keep it like this for now, and try your method when I have time. I'm currently using chrome, so it kinda works but not like I want it to. |
SatiriquesDec 19, 2014 7:42 AM
Dec 20, 2014 2:30 PM
#2445
FIXED Need some maybe quick help please I think I've messed something up I don't know what :3 I'm trying to make a new blog and the top half looks diffract from the bottom half and I don't know how to fix it. This is how it looks on mine : http://puu.sh/dCPqz/4010b08cc6.jpg Blog : http://myanimelist.net/blog.php?eid=764823 Code stuff not sure what to call this: https://www.dropbox.com/s/w3bzxnckobhnr6n/Code.txt?dl=0 |
ShiArukuDec 22, 2014 5:32 PM
Dec 27, 2014 8:00 AM
#2446
Hey guys I just tried to use the akame liststyle of hahaido and got some displaying problems with the cover. From what I get he uses more and it displays the cover wrong. Screenshot of issue: http://i.imgur.com/ay2nypO.png Source: https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Style.css How can I fix it? Thanks a lot in advance |
Dec 28, 2014 1:32 PM
#2447
Hmm, it works fine for me? Preview: Code: @import url(http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Architects+Daughter); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Animations.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/covers_more.css); /* THEMES */ /*@import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Akame.css); *//* AKAME */ @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Esdese.css); /* ESDESE */ /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ .hide:before { display: block; content: ''; margin-left: -15px; margin-top: -73px; width: 212px; height: 300px; background: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Images/covers_bg.png) no-repeat; } .hide { visibility: hidden; position: fixed !important; display: block !important; right: 50px; top: -300px; width: 182px; height: 178px; padding: 73px 15px 50px; background-repeat: no-repeat; background-position: center center; background-clip: content-box; background-size: 100% 100%; transform: rotate(5deg); -webkit-transform: rotate(5deg); transition: top .5s linear; -webkit-transition: top .5s linear; z-index: 5; } :hover + .hide { top: 0; visibility: visible; animation: Dagger 1.5s ease-in-out .4s infinite alternate; -webkit-animation: Dagger 1.5s ease-in-out .4s infinite alternate; } a { text-decoration: none; } body { font-family: 'IM Fell English SC', serif; font-size: 13px; letter-spacing: .5px; background-color: #000000; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -890px; top: 0; width: 600px; padding-top: 50px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display: table-cell; } .animetitle span { display: inline-block; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #FFFFFF; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:first-of-type { visibility: hidden; position: absolute; margin-left: -8px; font-size: 11px; } a[title="View More Information"] { display: none; } #list_surround tr:hover small, #list_surround tr:hover small a { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(0, 0, 0, .5); } tr:hover td[class^='td']:first-child:before { position: absolute; display: inline-block; content: ''; margin-left: -39px; margin-top: -5px; width: 25px; height: 25px; animation: Rotate .5s infinite alternate; -webkit-animation: Rotate .5s infinite alternate; } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(0, 0, 0, 1); } /* LIST FONT COLOR */ .table_headerLink { font-family: 'Architects Daughter', cursive; line-height: 24px; font-size: 10px; color: #000000 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #000000 !important; } .table_header { box-shadow: 1px 0 0 #000000; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; margin-left: -25px; height: 189px; } /* Headers pics */ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 250px; font-size: 0; background-repeat: no-repeat; z-index: -1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -250px; } .header_onhold span { background-position: center -500px; } .header_dropped span { background-position: center -750px; } .header_ptw span { background-position: center -1000px; } /* BACKGROUNDS */ .status_selected { background-position: center, center; } .category_totals, #grand_totals { padding: 5px; text-align: center; font-size: 12px; color: #FFFFFF; background-color: rgb(0, 0, 0); box-shadow: 1px 0 0 #000000; text-transform: lowercase; } #grand_totals { position: absolute; display: block; margin-top: -20px; width: 590px; } #copyright, #copyright a { font-family: 'Architects Daughter', cursive; color: #FFFFFF; } #copyright { position: fixed; display: block; right: 5px; bottom: 10px; width: 250px; font-size: 12px; text-align: right !important; } #copyright a { padding-right: 2px; font-size: 14px; } #copyright:after { diplay: block; content: "Designed by Hahaido"; font-size: 12px; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } I assume you erased something by accident. |
SatiriquesDec 28, 2014 1:43 PM
Dec 28, 2014 1:59 PM
#2448
There is something wrong with my manga list code. Anyone know how to fix it? http://imgur.com/G7JG5sW It should be showing the images in the background and other stuff. |
Dec 28, 2014 2:07 PM
#2449
Stark700 said: There is something wrong with my manga list code. Anyone know how to fix it? http://imgur.com/G7JG5sW It should be showing the images in the background and other stuff. You have this in your code: @import "https://dl.dropboxusercontent.com/u/239748463/MANGA%20LIST/Monogatari3.css"; #copyright { visibility: visible; } but your link is down: https://dl.dropboxusercontent.com/u/239748463/MANGA%20LIST/Monogatari3.css |
Dec 28, 2014 2:13 PM
#2450
Satiriques said: Stark700 said: There is something wrong with my manga list code. Anyone know how to fix it? http://imgur.com/G7JG5sW It should be showing the images in the background and other stuff. You have this in your code: @import "https://dl.dropboxusercontent.com/u/239748463/MANGA%20LIST/Monogatari3.css"; #copyright { visibility: visible; } but your link is down: https://dl.dropboxusercontent.com/u/239748463/MANGA%20LIST/Monogatari3.css I see. Do you happen to know a way to fix the link? |
More topics from this board
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
51 |
by Shishio-kun
»»
Yesterday, 12:37 PM |
|
» ✳️ Amazing new colorful layout for your list: Guchuko!Shishio-kun - Oct 14 |
3 |
by Mocha
»»
Oct 16, 6:27 PM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
131 |
by Shishio-kun
»»
Oct 14, 11:55 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1232 |
by sunnysummerday
»»
Oct 14, 9:37 AM |
|
» [CSS - Modern] ⭐️ Brink by V.L -- Cover-style theme! ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Mar 16, 2019 |
435 |
by slayra
»»
Oct 12, 4:04 AM |