New
Jul 24, 2013 9:31 PM
#1101
Hello, I attempted to use the custom category links CSS script as in this forum and added it in to my already defined style, but it's not showing up. /* // Self-explanatory */ BODY { background-image: url(http://myanimelist.net/images/userwalls/228868.jpg); background-attachment: fixed; background-repeat: repeat; background-position: top center; color: #FFFFFF; font-size: 12.00px; font-family: Times New Roman; background-color: #FFFFFF; } /* // Determines the positioning of your list */ #list_surround { margin: 0 auto; width: 920px; } /* // All links on your list */ a { color: #000066; text-decoration: none; } a:visited { color: #000066; text-decoration: none; } a:hover { color: #000066; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #EBEBEB; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65; color: #000000; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #000000; background-color: #DDDDDD; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: #000066; } .table_headerLink:Visited { color: #000066; } .table_headerLink:Hover { color: #000066; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=65; -moz-opacity: 0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=65; -moz-opacity: 0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #EBEBEB; } /* 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 { color: #FFFFFF !important; background: url(none) repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: absolute; margin:; margin-top: 0px; left: 0px; right:; top: ; bottom: ; } /* COMPLETED LINK */ .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a{ color: #FFFFFF !important; background: url(none) repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: absolute; margin-top: 0px; margin:; left: 180px; right:; top: ; 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{ color: #FFFFFF !important; background: url(none) repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: absolute; margin:; margin-top: 0px; left: 280px; right:; top: ; 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{ color: #FFFFFF !important; background: url(none) repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: absolute; margin:; margin-top: 0px; left: 370px; right:; top: ; 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{ color: #FFFFFF !important; background: url(none) repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: absolute; margin:; margin-top: 0px; left: 460px; right:; top: ; 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{ color: #FFFFFF !important; background: url(none) repeat scroll 0 0 brown !important; padding-right: ; padding-top: ; padding-bottom: ; position: absolute; margin:; margin-top: 0px; left: 570px; right:; top: ; 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; } .category_totals { } #grand_totals { text-align: center; } /* 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; font-size: 16px; } /* 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: px; } |
![]() |
Jul 24, 2013 9:48 PM
#1102
Jul 24, 2013 9:51 PM
#1103
And that's what I want to see, the links being white. Problem is that the links aren't white on my list, and I can't figure out why. They're the same color as all of the other links on my list right now. |
![]() |
Jul 24, 2013 10:06 PM
#1104
You don't need that big code. And you have few errors in your current code. Try BODY { background-image: url(http://myanimelist.net/images/userwalls/228868.jpg); background-attachment: fixed; background-repeat: repeat; background-position: top center; color: #FFFFFF; font-size: 12.00px; font-family: Times New Roman; background-color: #FFFFFF; } /* // Determines the positioning of your list */ #list_surround { margin: 0 auto; width: 920px; } /* // All links on your list */ a { color: #000066; text-decoration: none; } a:visited { color: #000066; text-decoration: none; } a:hover { color: #000066; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #EBEBEB; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65; color: #000000; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #000000; background-color: #DDDDDD; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: #000066; } .table_headerLink:Visited { color: #000066; } .table_headerLink:Hover { color: #000066; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=65); -moz-opacity: 0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=65); -moz-opacity: 0.65; opacity: 0.65; color: #000000; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #EBEBEB; } /* 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). */ .status_not_selected a, .status_selected a { color: #FFFFFF; } /* 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; } .category_totals { } #grand_totals { text-align: center; } /* 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; font-size: 16px; } /* 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: px; } |
Jul 25, 2013 2:47 AM
#1106
Kay, I asked this already, but since noone looks at those older entries, I'll ask again :D On my mangalist theme, category links on the sidebar look really weird when viewed in firefox. ![]() It looks alright in chrome and explorer, but all messed up in firefox. Since I work in chrome only, can anyone explain to me why does this happen and how can I fix it, if I can at all. Theme code ( really messy, sorry ) @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Scheme.css); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; ::-webkit-scrollbar-thumb:vertical { background-color:#c14778; height:10px; border: 2px solid white; } ::-webkit-scrollbar { height:0px; width:7px; background-color:white; } BODY { color: #999999; font-size: 10px; font-family: calibri !important; background-color: #ebebeb; background-image: url('http://oi41.tinypic.com/2wmdpqh.jpg'); background-attachment: fixed !important; background-position: top left; background-repeat: repeat-y; background-size: 300px; } #list_surround { margin-bottom: 70px !important; left: 0px; top: 0px; margin-left: 400px; width: 270px; background-color: #ffffff; padding-top: 0px; margin-top: -40px; } #inlineContent { background-image: url(''); top: 0; display: inline !important; height: 50px; margin-top: 0; position: relative; left: 0px; margin-left: 385px; width: 300px; z-index: 10 !important; } a { color: #999999; text-decoration: none; font-weight: normal !important; text-transform: uppercase; font-family: calibri !important; -moz-transition: .2s ease; -webkit-transition: .2s ease; -o-transition: .2s ease; } a:visited { color: #999999; text-decoration: none; } a:hover { color: #cccccc; text-decoration: none; -moz-transition: .2s ease; -webkit-transition: .2s ease; -o-transition: .2s ease; } small { text-align: center; font-size: 0px; font-family: calibri; text-transform: uppercase; } small a { text-align: center; font-size: 0px; font-family: calibri !important; text-transform: uppercase; } small a:first-of-type { text-align: center; font-size: 0px; font-family: calibri !important; text-transform: uppercase; display: block; height: 5px; width: 5px; background-color: #999999; margin-top: 5px; } small a:first-of-type:hover { background-color: #c14778; } .td1 { color: #999999; height: 18px !important; padding: 2px; background-color: #ffffff; font-weight: normal; font-family: calibri !important; } .td1:first-of-type { padding-left:20px;} .td2 { color: #999999; height: 18px !important; padding: 2px; background-color: #ffffff; font-weight: normal; font-family: calibri !important; } .td2:first-of-type { padding-left:20px;} .table_header { display: none; } /* td[class^='td']:nth-of-type(1) { display: block; width: 80px; } td[class^='td']:nth-of-type(2) { display: block; width: 40px; } */ /*CATEGORY LINKS*/ #list_surround .status_selected, #list_surround .status_not_selected { left:15px; position:fixed; top:260px; text-align: left !important; } #list_surround .status_selected a, #list_surround .status_not_selected a{ font-size: 10px; background-color: #1b1b1b; display: block; text-align: center; height: 18px; line-height: 18px; width: 120px; color: #fefefe border: 1px solid transparent; padding:0; box-shadow: 0px 0px transparent; } #list_surround .status_selected a:hover, #list_surround .status_not_selected a:hover { background-color: #fefefe; color: #c14778; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { top: 340px; } #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 { top:320px;; } #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 { top: 300px; } #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 { top:280px; } #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 { top: 360px;; } /*CATEGORY LINKS*/ .header_cw { margin-top: 0px; border-top: 10px solid #ebebeb !important; } .header_completed { margin-top: 0px; } .header_onhold { margin-top: 0px; } .header_dropped { margin-top: 0px; } .header_ptw { margin-top: 0px; } .header_title { background-color: #555555; border-bottom: 10px solid #ebebeb; border-top: 60px solid #ebebeb; height: 70px; line-height: 70px; text-align: center; font-size: 16px; font-weight: normal; text-transform: uppercase; font-style: italic; color: #cccccc; margin-bottom: 15px; font-family: calibri !important; box-shadow: 6px #000000; } .category_totals { font-size: 0px; } #grand_totals { display: none; position: fixed !important; left: 140px; top: 140px; } #grand_totals:before { display: inline-block; color: red; Content: "t"; text-allign: left; padding-right: 10px; font-family: times new roman; font-size:12px; height: 70px; } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: #000000 !important; display: none; left: 800px; padding: 10px; position: fixed; bottom: 0px; width: 300px; height: 300px; z-index: 1; background-image: url(none) !important; } .table_header:nth-of-type(3) { display: none; } td:nth-of-type(3)a { display: none; } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } #copyright { text-align: center; font-size: 0px; font-family: calibri; text-transform: uppercase; padding-bottom: 3px; padding-top: 30px; position: fixed; left: 18px; top: 50px; width: 114px; } #copyright:before { text-align: center; font-size: 11px; font-family: courier new; text-transform: lowercase; content:"No, I won't abandon hate. If I did, then nothing would be left of me."; padding-bottom: 3px; padding-top: 30px; color: #b0b0b0; } |
Jul 25, 2013 4:44 AM
#1107
Jul 25, 2013 2:45 PM
#1108
Hahaido said: ninety said: Kay, I asked this already, but since noone looks at those older entries, I'll ask again :D You're wrong ;) I saw your message and checked your list. But all looks good. What is your Firefox version? 11 or 3.6? Try to update it. Oh, I'm sorry then :O And thank you, I didn't realize o 3o I checked today and looks like I have some sort of technical issue with updates generally, which I didn't notice until you suggested my firefox might be out of date. It was out of date. I guess it doesn't matter tho, since don't use it, and other people see it the way it should look. To sum it up, you're a lifesaver Hahaido xD Now, another question ( I'm sorry I'm sorry :3 ) On my friend's list here ( messy, I'm working on it ): http://myanimelist.net/animelist/HappyLeaf I just can't find a way to make table header 'anime title' to have normal font weight. It's always bolded, no matter what I try ;___; Any ideas? Because it seems to me like I tried everything. I apologize for asking so many questions, it's just I used to make pages from scratch and it's kinda hard to adjust to already set parameters of mal themes T___T |
Jul 25, 2013 9:13 PM
#1109
Jul 26, 2013 3:07 PM
#1110
Hello.. This might sound like a silly question but is the new GIMP safe for windows 8? You see, I'm getting ready to redo my entire lists and I wanted to make a layout for them to show the older me. I once had GIMP on my older desktop, and wanted to use it again. The problem is, is that I am unsure if it will work well on the windows 8 system. So if anyone can give me any information about that, that would be great. Also, I kind of wanted to know.. How do you do the bubble effect? I really would love to have my shows and manga in bubbles on my layout.. but I don't know how to do it. |
Jul 26, 2013 8:56 PM
#1111
Jul 27, 2013 5:31 AM
#1112
Could anybody fix my top bar for me? (my animelist) I know that the codes from the table columns are interfering but I don't know how to stop them from doing so. When it comes to the top bar I'm always too stupid. |
Jul 27, 2013 6:16 AM
#1113
Jul 27, 2013 7:33 AM
#1114
Hahaido said: Cool, really fresh look to lists design. I want to help you but your goals are not clear to me. If you could draw how the menu should look, it would be great Thanks! I took the premade top bar and I just wanted it to look like the original. I don't have any goal, I just don't want it to be as messed up as it is now. |
Jul 27, 2013 9:15 AM
#1115
Jul 27, 2013 3:05 PM
#1116
Thanks! I'm glad it was so easy to solve, I will use this selector from now on. |
Jul 27, 2013 3:13 PM
#1117
Hahaido said: Last Gimp version perfectly works in Windows 8 Bubbles? What do you mean? Anime/manga covers? Not quite (though I will have to figure out how to fit the covers into them.). I mean actual bubbles like the kind the kids blow from one of those, various, bubble containers. Thank you, I'll have to download it when I have a stronger connection. |
Jul 28, 2013 7:01 AM
#1118
lovelyphantom said: Also, I kind of wanted to know.. How do you do the bubble effect? I really would love to have my shows and manga in bubbles on my layout.. but I don't know how to do it. Where did you see this bubble effect you're referring to (need a link)? |
Jul 29, 2013 3:36 AM
#1119
Hi, I can see that next to some anime that are airing currently, there is small text "airing". Would it be possible to make something like that I could mark some of my titles as "rewatched", the same way that some titles are marked as "airing"? I know I've seen something like that in some custom layout, but I can't find it again. |
Jul 29, 2013 5:26 AM
#1120
Shibata said: Hi, I can see that next to some anime that are airing currently, there is small text "airing". Would it be possible to make something like that I could mark some of my titles as "rewatched", the same way that some titles are marked as "airing"? I know I've seen something like that in some custom layout, but I can't find it again. something like this can have almost anyone (unless a premade CSS codes are "written" so that they prevent you from showing to you "AIRING" or "REWATCHING" both at the same time) !!! it's really easy to add a completed anime "REWATCHING" writing, for example in my anime list it's done like this: step 1: ![]() step 2: ![]() step 3: ![]() |
MonsterguyJul 29, 2013 5:34 AM
Jul 29, 2013 10:15 AM
#1121
Yeah, but the thing is when I set the rewatched anime as completed, the text "rewatching" disappears. And I want to have text "rewatched" visible on completed list all the time, just like there is "airing" visible on "plan to watch" or "watching" list. |
Jul 29, 2013 10:45 AM
#1122
Hello! I'd like some help with my list. I wanted some round corners for my list and I cheched your tutorial but it doesn't rly work at all. When I use the code in the ".header_title" nothing happens... When I use the ".list_surround" it rounds every vertical row (first the numbers, then the titles, then the score, etc etc). Even when I used the premade codes, it only messed up my list more. Not sure what I'm doing wrong or there's something in the list that collides with it but can you please tell me what to do? I'd rly like some round corners :( |
Jul 29, 2013 11:22 AM
#1123
Maffy said: I wanted some round corners for my list( Eh, nothing changes http://myanimelist.net/forum/?topicid=200323&show=1100#msg23751621 Shibata said: Yeah, but the thing is when I set the rewatched anime as completed, the text "rewatching" disappears. And I want to have text "rewatched" visible on completed list all the time, just like there is "airing" visible on "plan to watch" or "watching" list. You have to list all the entries you wanted that they should have the text .animetitle[href$="/Anime_Title_1"] span:after, .animetitle[href$="/Anime_Title_2"] span:after { position: relative; display: inline-block; margin-left: 4px; content: 'rewatched'; } Replace the red text with titles. Use '_' instead of spaces |
HahaidoJul 29, 2013 11:27 AM
Jul 29, 2013 1:03 PM
#1125
Hahaido said: Maffy said: I wanted some round corners for my list( Eh, nothing changes http://myanimelist.net/forum/?topicid=200323&show=1100#msg23751621 Thank you! That worked like a charm but is there any way I can put round corners to the last 2 boxes? I guess the one is grand totals and the other copyright? |
Jul 29, 2013 9:23 PM
#1126
Jul 30, 2013 12:35 AM
#1127
how we do that side preview effect that show a picture of the anime when the pointer is on a entry??? |
The Heart Signature Background Created By Tite Kubo All right reserved |
Jul 30, 2013 12:51 AM
#1128
Jul 30, 2013 2:04 AM
#1129
Lolelalos said: how we do that side preview effect that show a picture of the anime when the pointer is on a entry??? Look here http://myanimelist.net/forum/?topicid=563993 |
Jul 30, 2013 3:25 AM
#1130
Hahaido said: Lolelalos said: how we do that side preview effect that show a picture of the anime when the pointer is on a entry??? Look here http://myanimelist.net/forum/?topicid=563993 thanks alot :) |
The Heart Signature Background Created By Tite Kubo All right reserved |
Jul 31, 2013 11:42 AM
#1131
Shishio-kun said: lovelyphantom said: Also, I kind of wanted to know.. How do you do the bubble effect? I really would love to have my shows and manga in bubbles on my layout.. but I don't know how to do it. Where did you see this bubble effect you're referring to (need a link)? It's something like this here. Only, I want to be able to add the manga covers, rating, and side comments to some of the larger bubbles. |
Jul 31, 2013 10:12 PM
#1132
http://myanimelist.net/forum/?topicid=524033 Hey im using this post to make my anime list compatible with ipads and phones because when i browse my anime list on those devices the images are cut out how do i start fixing this with this post im kinda clueless |
Aug 1, 2013 5:20 AM
#1133
lovelyphantom said: Shishio-kun said: lovelyphantom said: Also, I kind of wanted to know.. How do you do the bubble effect? I really would love to have my shows and manga in bubbles on my layout.. but I don't know how to do it. Where did you see this bubble effect you're referring to (need a link)? It's something like this here. Only, I want to be able to add the manga covers, rating, and side comments to some of the larger bubbles. Thats not a CSS effect, its just bubbles someone made in Photoshop or something. There's plenty of tutorials online on making those which you can replace the background-image of whatever section you want to be a bubble. You can do it with the free Photoshop. And with CSS3 generators online you can make the codes for a section to be rounded and with gradient colors that are bubble like. Both those tutorials and generators can be Googled. If you need the section's name to add the codes or bubble background to you can ask here or use my selector finder. http://myanimelist.net/forum/?topicid=410909 Kikodave said: http://myanimelist.net/forum/?topicid=524033 Hey im using this post to make my anime list compatible with ipads and phones because when i browse my anime list on those devices the images are cut out how do i start fixing this with this post im kinda clueless It works like this: any CSS below /* Base styles here for below 1000px */ but before /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { will be seen on all resolutions. Anything after that will override the CSS before if it conflicts with it and be seen on all resolutions except those below 1000px. And so forth with the next resolutions. Thats why the background colors keep overriding each other as you increase resolution with that particular CSS. So what you probably wanna do is put the CSS coded for your phone after /* Base styles here for below 1000px... (or whatever its resolution is) then any CSS for your webpage after the lines after that /* Media query for devices above 1000px... Most phones see things below 1000px resolution, almost all computers don't. To get a better idea of how it works, you can replace the CSS in your edit box with the one in that topic. You'll notice that when you view the list on different resolutions the background color changes. |
Aug 2, 2013 1:00 AM
#1135
Hello, I'm new to this so I hope I don't post something that has been answered already or is painfully obvious. But, I was wondering if there is a CSS file that lists all of the Anime's by their type, like all OVA's, all Specials, all TV, all Movies etc? Kind of like how this file that I found on the "Square Layout" thread has a list of all of the anime covers. /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); Sorry if this is a bad/dumb question. |
Aug 2, 2013 2:26 AM
#1136
Aug 4, 2013 5:51 AM
#1138
Hi, I have a problem with my animelist and different screen resolutions. I have the background image that is next to my list. On my computer I am using 1920x1080 and everything looks great, but when I am looking at it on my notebook where I have 1366x768, the background image hides behind the list and ruins the design. Could someone tell me what should I do to have my animelist looking the same on every screen resolution? |
Aug 4, 2013 6:11 AM
#1139
Hey guys, I'm new here and rather sloppy at CSS editing. I took a pre-made code base and touched it up with my own colors. Love my setup except there's two issues. My Progress tab is far too wide. I'm not sure how to fix it with my CSS knowledge, but perhaps someone here can chime in. The other issue is my mobile phone (android) doesn't display any text at all when I visit my list on the mobile browser. The resolution of my device is 720p so I'm not entirely sure why it's acting up. It loads the wallpaper, but the text/tables are completely missing. Here's my code and the screenshot showing my progress tab issue is below it. @import"http://fonts.googleapis.com/css?family=PT+Sans"; #copyright { text-align:center; width:690px } #grand_totals { text-align:center } #list_surround { position: absolute !important; margin: auto !important; right: 300px !important; left: 300px !important;} #list_surround .animetitle+small { color:#FFFFFF; font-size:10px } #mal_cs_listinfo,#mal_cs_links,#mal_cs_otherlinks,#mal_cs_powered { display:none } * { color:#FFFFFF; font:400 13px "PT Sans"; text-decoration:initial } .animetitle { font-weight:400 } .category_totals { } .form { border:1px solid #E0E0E0; color:#000000; font:11px Verdana,Arial; padding:3px } .header_al { font-size:16px; font-weight:400 } .header_al_links { } .header_completed { } .header_cw { } .header_dropped { } .header_onhold { } .header_ptw { } .header_title { font-size:14px; font-weight:400 } .status_not_selected a,.status_selected a { background-color:#000000; border:1px solid rgba(255,255,255,0.2); border-bottom-left-radius:0; border-bottom-right-radius:0; border-style:solid; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; display:block!important; font-weight:400; padding:6px; transition:all .25s ease-in-out 0 } .status_not_selected a:hover { background-color:#000000; border-color:rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(0,0,0,0); transition:all .25s ease-in-out 0 } .status_not_selected,.status_selected { border:0 none!important; height:auto!important; padding:0; text-align:center!important; width:16.667%!important } .status_selected a { background-color:#154053; border:1px solid rgba(255,255,255,0.2); border-style:solid } .status_selected a:hover { background-color:#000000; border-color:rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(0,0,0,0); transition:all .25s ease-in-out 0 } .table_header { background-color:#000000; border-color:rgba(255,255,255,0.2); border-style:solid; border-width:1px 1px 1px 0; color:#000000; padding:3px } .table_headerlink { } .table_headerlink:hover { } .table_headerlink:visited { } .td1 { background-color:rgba(21,64,83,0.2); border-color:rgba(21,64,83,0.2); border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:3px; transition:all .25s ease-in-out 0 } .td1:nth-of-type(2),.td2:nth-of-type(2) { text-align:left } .td2 { background-color:rgba(21,64,83,0.2); border-color:rgba(21,64,83,0.2); border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:3px; transition:all .25s ease-in-out 0 } a { color:#FFFFFF; text-decoration:initial } a:hover { color:#33b5e5; text-decoration:initial } a:visited { color:#FFFFFF; text-decoration:initial } body { background-attachment:fixed!important; background-image:url(https://dl.dropboxusercontent.com/u/37471265/Drawings/AV__1920_Preview_by_allhopeislost.jpg); background-position:right bottom; background-repeat:initial initial; background-size:cover } td:nth-of-type(5) { width:260px } tr:hover [class^="td"] { background-color:rgba(21,64,83,0.8) } ![]() Thanks in advance! |
Aug 4, 2013 4:39 PM
#1140
Shibata said: Hi, I have a problem with my animelist and different screen resolutions. I have the background image that is next to my list. On my computer I am using 1920x1080 and everything looks great, but when I am looking at it on my notebook where I have 1366x768, the background image hides behind the list and ruins the design. Could someone tell me what should I do to have my animelist looking the same on every screen resolution? you should know that with what you want, you would need to change your list layout compleatly, just do the math !!! you said your first screen is 1920x1080 (width x height): 300px = are covers 700px = takes the table and 920px at maximum (almost half the screen is left), what remains for background picture and you said your second screen is 1366x768 (width x height): 300px = are covers 700px = takes the table and at maximum 366px what remains is for background picture - what would make on resolution 1366x768 one slim strap Well you decide what you want, but I would propose to move the covers on right of the table what would show covers on screen with resolution 1366x768 to be on top of the background picture. Otherwise what you want would be imposibile !!! (unless you want to have smaller but crampped table or covers placed on top of the table or something like that) Apacity said: Hey guys, I'm new here and rather sloppy at CSS editing. I took a pre-made code base and touched it up with my own colors. Love my setup except there's two issues. My Progress tab is far too wide. I'm not sure how to fix it with my CSS knowledge, but perhaps someone here can chime in. The other issue is my mobile phone (android) doesn't display any text at all when I visit my list on the mobile browser. The resolution of my device is 720p so I'm not entirely sure why it's acting up. It loads the wallpaper, but the text/tables are completely missing. Here's my code and the screenshot showing my progress tab issue is below it. @import"http://fonts.googleapis.com/css?family=PT+Sans"; #copyright { text-align:center; width:690px } #grand_totals { text-align:center } #list_surround { position: absolute !important; margin: auto !important; right: 300px !important; left: 300px !important;} #list_surround .animetitle+small { color:#FFFFFF; font-size:10px } #mal_cs_listinfo,#mal_cs_links,#mal_cs_otherlinks,#mal_cs_powered { display:none } * { color:#FFFFFF; font:400 13px "PT Sans"; text-decoration:initial } .animetitle { font-weight:400 } .category_totals { } .form { border:1px solid #E0E0E0; color:#000000; font:11px Verdana,Arial; padding:3px } .header_al { font-size:16px; font-weight:400 } .header_al_links { } .header_completed { } .header_cw { } .header_dropped { } .header_onhold { } .header_ptw { } .header_title { font-size:14px; font-weight:400 } .status_not_selected a,.status_selected a { background-color:#000000; border:1px solid rgba(255,255,255,0.2); border-bottom-left-radius:0; border-bottom-right-radius:0; border-style:solid; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; display:block!important; font-weight:400; padding:6px; transition:all .25s ease-in-out 0 } .status_not_selected a:hover { background-color:#000000; border-color:rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(0,0,0,0); transition:all .25s ease-in-out 0 } .status_not_selected,.status_selected { border:0 none!important; height:auto!important; padding:0; text-align:center!important; width:16.667%!important } .status_selected a { background-color:#154053; border:1px solid rgba(255,255,255,0.2); border-style:solid } .status_selected a:hover { background-color:#000000; border-color:rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(0,0,0,0); transition:all .25s ease-in-out 0 } .table_header { background-color:#000000; border-color:rgba(255,255,255,0.2); border-style:solid; border-width:1px 1px 1px 0; color:#000000; padding:3px } .table_headerlink { } .table_headerlink:hover { } .table_headerlink:visited { } .td1 { background-color:rgba(21,64,83,0.2); border-color:rgba(21,64,83,0.2); border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:3px; transition:all .25s ease-in-out 0 } .td1:nth-of-type(2),.td2:nth-of-type(2) { text-align:left } .td2 { background-color:rgba(21,64,83,0.2); border-color:rgba(21,64,83,0.2); border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:3px; transition:all .25s ease-in-out 0 } a { color:#FFFFFF; text-decoration:initial } a:hover { color:#33b5e5; text-decoration:initial } a:visited { color:#FFFFFF; text-decoration:initial } body { background-attachment:fixed!important; background-image:url(https://dl.dropboxusercontent.com/u/37471265/Drawings/AV__1920_Preview_by_allhopeislost.jpg); background-position:right bottom; background-repeat:initial initial; background-size:cover } td:nth-of-type(5) { width:260px } tr:hover [class^="td"] { background-color:rgba(21,64,83,0.8) } ![]() Thanks in advance! I wanted to clean a little your code but I soon gave up and only fixed it so that is works, although its messy, sorry too much work...hehehe anyway, try it now with this new updated CSS code: @import "http://fonts.googleapis.com/css?family=PT+Sans"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; #copyright { text-align: center; width: 100%; } #grand_totals { text-align: center; } #list_surround { margin-left: 10% !important; margin-right: 10% !important; width: 80% !important; } #list_surround .animetitle + small { color: #FFFFFF; font-size: 10px; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { } * { color: #FFFFFF; font: 400 13px "PT Sans"; text-decoration: initial; } .animetitle { font-weight: 400; } .category_totals { } .form { border: 1px solid #E0E0E0; color: #000000; font: 11px Verdana,Arial; padding: 3px; } .header_al { font-size: 16px; font-weight: 400; } .header_al_links { } .header_completed { } .header_cw { } .header_dropped { } .header_onhold { } .header_ptw { } .header_title { font-size: 14px; font-weight: 400; } .status_not_selected a, .status_selected a { background-color: #000000; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0 0 0 0; color: #FFFFFF; display: block !important; font-weight: 400; padding: 6px; } .status_not_selected a:hover { background-color: #000000; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 transparent; } .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0; text-align: center !important; width: 16.667% !important; } .status_selected a { background-color: #154053; border: 1px solid rgba(255, 255, 255, 0.2); } .status_selected a:hover { background-color: #000000; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 transparent; } .table_header { background-color: #000000; border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px 1px 1px 0; color: #000000; padding: 3px; } .table_headerlink { } .table_headerlink:hover { } .table_headerlink:visited { } .td1 { background-color: rgba(21, 64, 83, 0.2); border-color: rgba(21, 64, 83, 0.2); border-style: solid; border-width: 0 1px 1px 0; color: #FFFFFF; padding: 3px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .td2 { background-color: rgba(21, 64, 83, 0.2); border-color: rgba(21, 64, 83, 0.2); border-style: solid; border-width: 0 1px 1px 0; color: #FFFFFF; padding: 3px; } a { color: #FFFFFF; text-decoration: initial; } a:hover { color: #33B5E5; text-decoration: initial; } a:visited { color: #FFFFFF; text-decoration: initial; } body { background-attachment: fixed !important; background-image: url("http://i.imgur.com/XfWKDy4.jpg"); background-position: right bottom; background-size: cover; } tr:hover [class^="td"] { background-color: rgba(21, 64, 83, 0.8); } PS: excuse me for bad english but it's almost 2 am in the morning and almost 30 degress in my room, I'm literally frying myself here, not the best conditions for work, sleep or anything... (the sudden heat wave is killing me) |
MonsterguyAug 4, 2013 4:58 PM
Aug 4, 2013 7:18 PM
#1141
Monsterguy said: Shibata said: Hi, I have a problem with my animelist and different screen resolutions. I have the background image that is next to my list. On my computer I am using 1920x1080 and everything looks great, but when I am looking at it on my notebook where I have 1366x768, the background image hides behind the list and ruins the design. Could someone tell me what should I do to have my animelist looking the same on every screen resolution? you should know that with what you want, you would need to change your list layout compleatly, just do the math !!! you said your first screen is 1920x1080 (width x height): 300px = are covers 700px = takes the table and 920px at maximum (almost half the screen is left), what remains for background picture and you said your second screen is 1366x768 (width x height): 300px = are covers 700px = takes the table and at maximum 366px what remains is for background picture - what would make on resolution 1366x768 one slim strap Well you decide what you want, but I would propose to move the covers on right of the table what would show covers on screen with resolution 1366x768 to be on top of the background picture. Otherwise what you want would be imposibile !!! (unless you want to have smaller but crampped table or covers placed on top of the table or something like that) Apacity said: Hey guys, I'm new here and rather sloppy at CSS editing. I took a pre-made code base and touched it up with my own colors. Love my setup except there's two issues. My Progress tab is far too wide. I'm not sure how to fix it with my CSS knowledge, but perhaps someone here can chime in. The other issue is my mobile phone (android) doesn't display any text at all when I visit my list on the mobile browser. The resolution of my device is 720p so I'm not entirely sure why it's acting up. It loads the wallpaper, but the text/tables are completely missing. Here's my code and the screenshot showing my progress tab issue is below it. @import"http://fonts.googleapis.com/css?family=PT+Sans"; #copyright { text-align:center; width:690px } #grand_totals { text-align:center } #list_surround { position: absolute !important; margin: auto !important; right: 300px !important; left: 300px !important;} #list_surround .animetitle+small { color:#FFFFFF; font-size:10px } #mal_cs_listinfo,#mal_cs_links,#mal_cs_otherlinks,#mal_cs_powered { display:none } * { color:#FFFFFF; font:400 13px "PT Sans"; text-decoration:initial } .animetitle { font-weight:400 } .category_totals { } .form { border:1px solid #E0E0E0; color:#000000; font:11px Verdana,Arial; padding:3px } .header_al { font-size:16px; font-weight:400 } .header_al_links { } .header_completed { } .header_cw { } .header_dropped { } .header_onhold { } .header_ptw { } .header_title { font-size:14px; font-weight:400 } .status_not_selected a,.status_selected a { background-color:#000000; border:1px solid rgba(255,255,255,0.2); border-bottom-left-radius:0; border-bottom-right-radius:0; border-style:solid; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; display:block!important; font-weight:400; padding:6px; transition:all .25s ease-in-out 0 } .status_not_selected a:hover { background-color:#000000; border-color:rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(0,0,0,0); transition:all .25s ease-in-out 0 } .status_not_selected,.status_selected { border:0 none!important; height:auto!important; padding:0; text-align:center!important; width:16.667%!important } .status_selected a { background-color:#154053; border:1px solid rgba(255,255,255,0.2); border-style:solid } .status_selected a:hover { background-color:#000000; border-color:rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(0,0,0,0); transition:all .25s ease-in-out 0 } .table_header { background-color:#000000; border-color:rgba(255,255,255,0.2); border-style:solid; border-width:1px 1px 1px 0; color:#000000; padding:3px } .table_headerlink { } .table_headerlink:hover { } .table_headerlink:visited { } .td1 { background-color:rgba(21,64,83,0.2); border-color:rgba(21,64,83,0.2); border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:3px; transition:all .25s ease-in-out 0 } .td1:nth-of-type(2),.td2:nth-of-type(2) { text-align:left } .td2 { background-color:rgba(21,64,83,0.2); border-color:rgba(21,64,83,0.2); border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:3px; transition:all .25s ease-in-out 0 } a { color:#FFFFFF; text-decoration:initial } a:hover { color:#33b5e5; text-decoration:initial } a:visited { color:#FFFFFF; text-decoration:initial } body { background-attachment:fixed!important; background-image:url(https://dl.dropboxusercontent.com/u/37471265/Drawings/AV__1920_Preview_by_allhopeislost.jpg); background-position:right bottom; background-repeat:initial initial; background-size:cover } td:nth-of-type(5) { width:260px } tr:hover [class^="td"] { background-color:rgba(21,64,83,0.8) } ![]() Thanks in advance! I wanted to clean a little your code but I soon gave up and only fixed it so that is works, although its messy, sorry too much work...hehehe anyway, try it now with this new updated CSS code: @import "http://fonts.googleapis.com/css?family=PT+Sans"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; #copyright { text-align: center; width: 100%; } #grand_totals { text-align: center; } #list_surround { margin-left: 10% !important; margin-right: 10% !important; width: 80% !important; } #list_surround .animetitle + small { color: #FFFFFF; font-size: 10px; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { } * { color: #FFFFFF; font: 400 13px "PT Sans"; text-decoration: initial; } .animetitle { font-weight: 400; } .category_totals { } .form { border: 1px solid #E0E0E0; color: #000000; font: 11px Verdana,Arial; padding: 3px; } .header_al { font-size: 16px; font-weight: 400; } .header_al_links { } .header_completed { } .header_cw { } .header_dropped { } .header_onhold { } .header_ptw { } .header_title { font-size: 14px; font-weight: 400; } .status_not_selected a, .status_selected a { background-color: #000000; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0 0 0 0; color: #FFFFFF; display: block !important; font-weight: 400; padding: 6px; } .status_not_selected a:hover { background-color: #000000; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 transparent; } .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0; text-align: center !important; width: 16.667% !important; } .status_selected a { background-color: #154053; border: 1px solid rgba(255, 255, 255, 0.2); } .status_selected a:hover { background-color: #000000; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 transparent; } .table_header { background-color: #000000; border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px 1px 1px 0; color: #000000; padding: 3px; } .table_headerlink { } .table_headerlink:hover { } .table_headerlink:visited { } .td1 { background-color: rgba(21, 64, 83, 0.2); border-color: rgba(21, 64, 83, 0.2); border-style: solid; border-width: 0 1px 1px 0; color: #FFFFFF; padding: 3px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .td2 { background-color: rgba(21, 64, 83, 0.2); border-color: rgba(21, 64, 83, 0.2); border-style: solid; border-width: 0 1px 1px 0; color: #FFFFFF; padding: 3px; } a { color: #FFFFFF; text-decoration: initial; } a:hover { color: #33B5E5; text-decoration: initial; } a:visited { color: #FFFFFF; text-decoration: initial; } body { background-attachment: fixed !important; background-image: url("http://i.imgur.com/XfWKDy4.jpg"); background-position: right bottom; background-size: cover; } tr:hover [class^="td"] { background-color: rgba(21, 64, 83, 0.8); } PS: excuse me for bad english but it's almost 2 am in the morning and almost 30 degress in my room, I'm literally frying myself here, not the best conditions for work, sleep or anything... (the sudden heat wave is killing me) You fixed both problems. Thank you so so much!! |
Aug 5, 2013 3:11 AM
#1142
Ah, I really should have done the math, my fault :p I remade my layout by deleting cover pic and moving list to the left and it looked great on my notebook, since the table was next to the wallpaper, but then on 1920x1080 there was big space between wallpaper and list. I think I'm gonna stay with what I have right now. My only idea is to set some other wallpaper or delete it at all but only for lower resolutions, so I could have my current wallpaper on 1920x1080 but on lower resolution screen there would be displaying another wallpaper. Is something like that possible or I'm asking for too much :)? (In one sentence: is there a code to display one wallpaper at one resolution and another wallpaper at another resolution?) |
Aug 5, 2013 3:46 AM
#1143
Shibata said: is there a code to display one wallpaper at one resolution and another wallpaper at another resolution? @media all and (max-width: 1366px) { body { background-image: none !important; } } but I recommend you following code body { background-attachment: fixed !important; background-color: white !important; background-image: url("http://i.imgur.com/jdNZkJN.jpg") !important; background-repeat: no-repeat !important; background-position: 260px center; background-size: contain; } Update: try this code @import url(http://fonts.googleapis.com/css?family=Quicksand:700); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Gray.css); @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; body { background-attachment: fixed !important; background-color: white !important; background-image: url("http://i.imgur.com/jdNZkJN.jpg") !important; background-repeat: no-repeat !important; background-position: 600px center; } #list_surround { position: absolute !important; left: 260px !important; } body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 11px; } #inlineContent { display: inline-block !important; height: 362px !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 605px !important; z-index: -1 !important; } #grand_totals { background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; text-align: center; transition: all 0.25s ease-in-out 0s; vertical-align: middle; } a { color: #486caa; text-decoration: none; } a:visited { color: #486caa; text-decoration: none; } a:hover { color: #FFFFFF; text-decoration: none; } small { color: #7248b0; font-size: 10px !important; text-decoration: none; } #list_surround { background-color: transparent; background: transparent; background-position: center top; background-repeat: no-repeat; margin-left: 5px; padding-top: 50px; text-transform: none; width: 700px; } #list_surround tbody tr:hover { } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; } .td1, .td2 { background: rgba(171,219,242,0.8); background-position: center center; border-style: hidden; color: white; padding: 3px; } .table_header { background: rgba(171,219,242,0.8); border-style: hidden; color: #367add !important; padding: 3px; } .td1[width="125"] { font-size: 11px; padding: 1px 20px 0px 1px; width: 200px; } .td1[width="45"] { font-size: 11px; font-weight: bold; } .td1[width="70"] { font-size: 11px; font-weight: bold; } .td2[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td2[width="45"] { font-size: 11px; font-weight: bold; } .td2[width="70"] { font-size: 11px; font-weight: bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 10px; } .table_headerLink { color: #FFFFFF; font-weight: normal; } .table_headerLink:visited { color: #FFFFFF; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #486caa; font-family: Century Gothic,Verdana,Arial; font-size: 14px; font-weight: bold; padding: 5px; background: rgba(216,254,255, 0.8); border-bottom-style: solid; border-top-style: solid; border-width: 2px !important; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 12px; font-weight: bold; padding: 5px; background: rgba(171,219,242,0.8); border-bottom-style: solid; border-width: 2px !important; border-top-style: solid; } .header_title { font-size: 32px; font-family: Comic Sans MS; color: #367add; margin-top: 0px; margin-bottom: 10px; margin-left: 280px; } .header_cw { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_completed { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_onhold { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_dropped { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_ptw { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .category_totals { background: rgba(171,219,242,0.8); font-size: 12px; color: white; height: 40px; text-align: center; border-radius: 0 0 30px 30px; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #bb3e46; font-family: Verdana,Arial; font-size: 11px; height: 25px; padding: 29px; text-align: center; } #copyright { background-image: url("http://i.imgur.com/XZrsPR4.png"); background-repeat: no-repeat; color: #fef1f8; font-size: 10px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } /*HORIZONTAL LINES */ .td1, .td2, .table_header { border-color: white; border-style: solid; border-width: 0 0 1px !important; } td.table_header:nth-of-type(1) { border-right-width: 0 !important; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. 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. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ :hover + .hide { background-size: cover; left: 15px; top: 240px; height: 350px; width: 226px; padding-bottom: 0px; 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; } /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding: 8px; } /* COPYRIGHT STARTING TEXT MSG Whats posted after Content is what it will say before the main copyright info. It can be a huge long message and you can change the color of the text here. You can change it to what you want and it will leave the main copyright text alone. Make sure you leave a space between the quotation mark after Content: and beginning of msg. By default is says This is my list! Increase padding-right number to put some space between your text and the next default text. If you remove the color it will be the default color of the copyright. */ #copyright:before { color: ; Content: " Original design by Ichigo-Sora. Modified by Shibata."; text-allign: top; padding-right: 2px; font-family: Verdana,Arial; font-size:10px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url(http://i.imgur.com/kjvLgRK.png); background-position: right top; background-repeat: no-repeat; padding-top: 182px; } .animetitle[href$="/Air_Gear"] span:after, .animetitle[href$="/Angel_Beats!"] span:after, .animetitle[href$="/Bakemonogatari"] span:after, .animetitle[href$="/Death Note"] span:after, .animetitle[href$="/Highschool_of_the_Dead"] span:after, .animetitle[href$="/Seitokai_Yakuindomo"] span:after, .animetitle[href$="/Suzumiya_Haruhi_no_Yuuutsu"] span:after { position: relative; display: inline-block; margin-left: 8px; content: 'rewatched'; font-size: 9px; color: purple; } a[href="http://myanimelist.net/anime/2001/Tengen_Toppa_Gurren_Lagann"] , [href="http://myanimelist.net/anime/2904/Code_Geass:_Hangyaku_no_Lelouch_R2"] , [href="http://myanimelist.net/anime/12189/Hyouka"] { background-attachment: scroll; background-color: transparent; background-image: url(""); background-position: left top; background-repeat: no-repeat; color: purple !important; font-weight: bold; padding-bottom: 10px; padding-left: 0px; } |
HahaidoAug 5, 2013 4:08 AM
Aug 5, 2013 5:26 AM
#1144
I used the @media code and this is exactly what I wanted, now I have my list clear on both screens :) (I'll need to think about some nice wallpaper for lower resolution later since currently I just cut out from the original one and put it next to the list) Thanks for help once again, you're great! |
Aug 5, 2013 8:05 AM
#1145
Hello o.o I dunno what I did really but I was almost done with my list and then I got to my custom headers..and they're all wonky. Here's a link to my list: http://myanimelist.net/animelist/AboveAllSanity And here's some screenies: ![]() ![]() And finally my header portion of my CSS layout: /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/currentlywatching_zps10877b57.jpg"); background-position: 0 0; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: 0; margin-left: 63px; margin-top: -45px; } .header_completed { background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/completed_zps910c15e6.jpg"); background-position: 61px 5px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: 0; margin-top: -40px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/onhold_zpscf7efa26.jpg"); background-position: 91px 11px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: 0; margin-top: -40px; } .header_dropped { background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/dropped_zpsd4a8afe2.jpg"); background-position: 131px 5px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: 0; margin-top: -40px; } .header_ptw { background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/plantowatch_zpscee75fa8.jpg"); background-position: 15px 5px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: 0; margin-top: -40px; } So what I'm asking, I want to have my headers centered above they're respected lists, and they sort of are but they're too high and it looks..weird. :x Thank you for your help~ |
Aug 5, 2013 9:08 AM
#1146
AboveAllSanity said: I want to have my headers centered above they're respected lists Like this? @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/102421246/MAL/CSS/AnoHanaCustom2/topbarAnohana.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; /* MAIN BACKGROUNDS AND CURSOR */ body { background-size: cover; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/NakamuraSawafull1466084-Wallpaper_zps58f43c48.jpg"); cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto; background-attachment: fixed; background-clip: border-box; background-color: transparent; background-position: right 57% bottom, 0 0; background-repeat: no-repeat no-repeat; background-size: cover, cover; font-family: candara; } /* CURSORS FOR LINKS */ a { color: #FFFFFF; cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png") 1 2, auto; text-shadow: none; } a:hover { color: #FF4000; cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* LIST SETTINGS AND LOGO */ #list_surround { background-attachment: scroll; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/let_s_make_a_contract_by_obsessive_fan_girl-d6f6yql_zps4e49f7e6.jpg"); background-position: 50% 0; background-repeat: no-repeat no-repeat; font-size: 81.25%; height: 250px; left: 0 !important; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 228px; position: absolute; right: 0 !important; width: 650px; opacity: .7; } /* CUSTOM HEADERS */ .header_title { color: transparent; } .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { height: 64px; background-repeat: no-repeat; background-position: center; } .header_cw { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/currentlywatching_zps10877b57.jpg"); } .header_completed { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/completed_zps910c15e6.jpg"); } .header_onhold { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/onhold_zpscf7efa26.jpg"); } .header_dropped { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/dropped_zpsd4a8afe2.jpg"); height: 200px; } .header_ptw { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/plantowatch_zpscee75fa8.jpg"); } /* LEFT SIDE CATEGORY MENU Top codes influence the opacity and transition of the buttons, ask in the original topic if there's something you wanna change them but don't know how. The rest of the codes are background and size settings. */ .status_not_selected { opacity: 0.5; } .status_not_selected:hover { color: transparent; opacity: 1; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease;; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; width: 270px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/KasugaTakaofull1480255-ButtonWatching_zps9d2d43f6.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; border: 1px solid #FFFFFF; border-radius: 20px 20px 20px 20px; display: block; height: 90px; left: 0; padding: 0; position: fixed; top: 50px; width: 300px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/tumblr_mjhfwfYOTh1r9piwro1_500-ButtonCompleted_zpsc1b37687.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; border-top-left-radius: 20px; border-top-right-radius: 20px; top: 160px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/aku-no-hana-01-ButtonOnHold_zpsab726ab3.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; top: 270px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/banner_zps2dcb6e59.jpg"); background-position: 0 -7px; background-repeat: repeat repeat; top: 380px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/969161_171573773010794_185267585_n-ButtonPlanToWatch_zps6ba72728.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; display: inline; top: 490px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/AkunoHana6001501049-ButtonAllAnime_zps1a2c0bf1.jpg"); background-position: 0 0; background-repeat: repeat repeat; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; display: inline; top: 600px; width: 300px; } /* LIST ROW/BOTTOM SETTINGS AND COLORS You'll find the background colors of the rows in the top two sets of codes and the colors seen on mouse hover for rows in the third set. If you don't know about rgba colors, you can look up online generators that will easily make a unique color of yours choice, with the CSS for it you can add here! The following codes affect other parts of the list and are named clearly. */ .td1 { background-color: rgba(8, 236, 228, 0.5); height: 20px; } .td2 { background-color: rgba(49, 59, 255, 0.506); height: 20px; } tr:hover [class^="td"] { background-color: rgba(51, 111, 235, 0.7); -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease;; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { background-color: rgba(12, 46, 196, 0.7); border: 0 none; padding: 4px; text-align: center; vertical-align: top; } .table_header, .td1, .td2, .category_totals { color: white; } .category_totals { background-color: rgba(12, 46, 196, 0.7); border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: rgba(12, 46, 196, 0.7); color: #FFFFFF; } #grand_totals { background-color: rgba(12, 46, 196, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: #FFFFFF; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright, #copyright:hover { background-color: rgba(12, 46, 196, 0.6); border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 650px; } #copyright:hover { } #copyright:before { color: black; content: " Design by SylakentH_, thanks to TheHolyPotato and Shishio's Custom Lists Club!"; font-size: 12px; padding-right: 10px; } /* OTHER CODES If you can't find or figure out how to change something, ask in the original topic for this layout! */ .status_selected { display: block; } .status_not_selected { display: block; } * { text-decoration: none; } #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; } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 500px; } a, .td1, .td2, .category_totals { } a, .td1, .td2, .category_totals { } .table_header:nth-of-type(2) { } .td1:nth-of-type(2), .td2:nth-of-type(2) { } :hover + .hide { background-color: rgba(12, 46, 196, 0.6); background-position: 50% 18% !important; background-repeat: no-repeat !important; background-size: 250px 330px !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: ridge; border-width: 2px; display: block !important; height: 498px; padding: 79px 40px 10px 10px; position: fixed; right: 3px; top: 60px; width: 234px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: 10px; width: 262px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: transparent !important; background-image: url("none") !important; display: none; font-size: 14px; height: 145px; padding: 10px 10px 0 24px; position: fixed; right: 13px; text-align: center; top: 449px; width: 235px; z-index: 1; } .table_header:nth-of-type(6) { display: none; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } |
Aug 5, 2013 8:20 PM
#1147
Hahaido said: AboveAllSanity said: I want to have my headers centered above they're respected lists Like this? @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/102421246/MAL/CSS/AnoHanaCustom2/topbarAnohana.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; /* MAIN BACKGROUNDS AND CURSOR */ body { background-size: cover; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/NakamuraSawafull1466084-Wallpaper_zps58f43c48.jpg"); cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto; background-attachment: fixed; background-clip: border-box; background-color: transparent; background-position: right 57% bottom, 0 0; background-repeat: no-repeat no-repeat; background-size: cover, cover; font-family: candara; } /* CURSORS FOR LINKS */ a { color: #FFFFFF; cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png") 1 2, auto; text-shadow: none; } a:hover { color: #FF4000; cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* LIST SETTINGS AND LOGO */ #list_surround { background-attachment: scroll; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/let_s_make_a_contract_by_obsessive_fan_girl-d6f6yql_zps4e49f7e6.jpg"); background-position: 50% 0; background-repeat: no-repeat no-repeat; font-size: 81.25%; height: 250px; left: 0 !important; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 228px; position: absolute; right: 0 !important; width: 650px; opacity: .7; } /* CUSTOM HEADERS */ .header_title { color: transparent; } .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { height: 64px; background-repeat: no-repeat; background-position: center; } .header_cw { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/currentlywatching_zps10877b57.jpg"); } .header_completed { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/completed_zps910c15e6.jpg"); } .header_onhold { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/onhold_zpscf7efa26.jpg"); } .header_dropped { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/dropped_zpsd4a8afe2.jpg"); height: 200px; } .header_ptw { background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/plantowatch_zpscee75fa8.jpg"); } /* LEFT SIDE CATEGORY MENU Top codes influence the opacity and transition of the buttons, ask in the original topic if there's something you wanna change them but don't know how. The rest of the codes are background and size settings. */ .status_not_selected { opacity: 0.5; } .status_not_selected:hover { color: transparent; opacity: 1; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease;; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; width: 270px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/KasugaTakaofull1480255-ButtonWatching_zps9d2d43f6.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; border: 1px solid #FFFFFF; border-radius: 20px 20px 20px 20px; display: block; height: 90px; left: 0; padding: 0; position: fixed; top: 50px; width: 300px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/tumblr_mjhfwfYOTh1r9piwro1_500-ButtonCompleted_zpsc1b37687.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; border-top-left-radius: 20px; border-top-right-radius: 20px; top: 160px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/aku-no-hana-01-ButtonOnHold_zpsab726ab3.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; top: 270px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/banner_zps2dcb6e59.jpg"); background-position: 0 -7px; background-repeat: repeat repeat; top: 380px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/969161_171573773010794_185267585_n-ButtonPlanToWatch_zps6ba72728.jpg"); background-position: 0 -5px; background-repeat: repeat repeat; display: inline; top: 490px; } #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-attachment: scroll; background-color: transparent; background-image: url("http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/AkunoHana6001501049-ButtonAllAnime_zps1a2c0bf1.jpg"); background-position: 0 0; background-repeat: repeat repeat; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; display: inline; top: 600px; width: 300px; } /* LIST ROW/BOTTOM SETTINGS AND COLORS You'll find the background colors of the rows in the top two sets of codes and the colors seen on mouse hover for rows in the third set. If you don't know about rgba colors, you can look up online generators that will easily make a unique color of yours choice, with the CSS for it you can add here! The following codes affect other parts of the list and are named clearly. */ .td1 { background-color: rgba(8, 236, 228, 0.5); height: 20px; } .td2 { background-color: rgba(49, 59, 255, 0.506); height: 20px; } tr:hover [class^="td"] { background-color: rgba(51, 111, 235, 0.7); -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease;; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { background-color: rgba(12, 46, 196, 0.7); border: 0 none; padding: 4px; text-align: center; vertical-align: top; } .table_header, .td1, .td2, .category_totals { color: white; } .category_totals { background-color: rgba(12, 46, 196, 0.7); border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: rgba(12, 46, 196, 0.7); color: #FFFFFF; } #grand_totals { background-color: rgba(12, 46, 196, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: #FFFFFF; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright, #copyright:hover { background-color: rgba(12, 46, 196, 0.6); border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 650px; } #copyright:hover { } #copyright:before { color: black; content: " Design by SylakentH_, thanks to TheHolyPotato and Shishio's Custom Lists Club!"; font-size: 12px; padding-right: 10px; } /* OTHER CODES If you can't find or figure out how to change something, ask in the original topic for this layout! */ .status_selected { display: block; } .status_not_selected { display: block; } * { text-decoration: none; } #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; } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 500px; } a, .td1, .td2, .category_totals { } a, .td1, .td2, .category_totals { } .table_header:nth-of-type(2) { } .td1:nth-of-type(2), .td2:nth-of-type(2) { } :hover + .hide { background-color: rgba(12, 46, 196, 0.6); background-position: 50% 18% !important; background-repeat: no-repeat !important; background-size: 250px 330px !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: ridge; border-width: 2px; display: block !important; height: 498px; padding: 79px 40px 10px 10px; position: fixed; right: 3px; top: 60px; width: 234px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: 10px; width: 262px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: transparent !important; background-image: url("none") !important; display: none; font-size: 14px; height: 145px; padding: 10px 10px 0 24px; position: fixed; right: 13px; text-align: center; top: 449px; width: 235px; z-index: 1; } .table_header:nth-of-type(6) { display: none; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } Yes perfect! Thank you!~ c: |
Aug 6, 2013 6:09 AM
#1148
Hello. I need your help. I for some reason when clicking on the name of the anime pictures do not appear. Where there may be a bug in the code? If not it will be difficult, then write the code. Thank you. The essence of the problem: ![]() Here's the code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css); body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://s2.ipicture.ru/uploads/20130806/pV1ZeEjC.png); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1200px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://s2.ipicture.ru/uploads/20130806/zYohSVCK.png); background-position: 40px -10px; background-repeat:no-repeat no-repeat; font-size:87%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:380px; position:absolute; right:80px !important; width:800px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { text-decoration:underline; } .table_header { background-color:rgba(180, 32, 48, 0.6); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:6px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:6px; } .td1 { background-color:rgba(70, 70, 70, 0.498039); height:20px; } .td2 { background-color:rgba(50, 50, 50, 0.498039); height:20px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:left; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } :hover + .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 2px solid white;; border-left: 2px solid white; border-right: 2px solid white; border-bottom: 2px solid white; border-radius: 25px 25px 25px 25px; background-color: white; background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } .hide:before { background: transparent; content: ""; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } .category_totals { background-color:rgba(255, 255, 255, 0.498039); border-bottom-left-radius:6px; border-bottom-right-radius:6px; border-top-left-radius:0; border-top-right-radius:0; color:rgba(50, 50, 50, 0.498039); text-align:center; } [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-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://s1.ipicture.ru/uploads/20130806/72WTI2lW.png); background-position:100% 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:50px; padding:0; position:fixed; top:30px; width:350px; } #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://s1.ipicture.ru/uploads/20130806/IY4cll09.png); background-position:100% 0; top:130px; } #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://s1.ipicture.ru/uploads/20130806/iI34sA1S.png); background-position:0 0; top:230px; } #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://s1.ipicture.ru/uploads/20130806/H3FvGzJf.png); background-position:100% 0; top:330px; } #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://s1.ipicture.ru/uploads/20130806/Cwp06pWT.png); background-position:0 0; top:430px; } #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://s1.ipicture.ru/uploads/20130806/YzVzKfSj.png); background-position:100% 0; top:530px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:80px; width:350px; } .header_cw { background-color:transparent; background-image:url(http://s1.ipicture.ru/uploads/20130806/bV6SnVxf.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:-120px; margin-top:0px; } .header_completed { background-color:transparent; background-image:url(http://s1.ipicture.ru/uploads/20130806/E2pFcvxz.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:-120px; margin-top:0px; } .header_onhold { background-color:transparent; background-image:url(http://s1.ipicture.ru/uploads/20130806/qPnnTZlM.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:-120px; margin-top:0px; } .header_dropped { background-color:transparent; background-image:url(http://s1.ipicture.ru/uploads/20130806/ayVxyT8R.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:-120px; margin-top:0px; } .header_ptw { background-color:transparent; background-image:url(http://s1.ipicture.ru/uploads/20130806/2PHxR58P.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:-120px; margin-top:0px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } .animetitle + small { color:#F5B800 !important; font-size:87%; font-weight:bold; } Link to animelist: http://myanimelist.net/animelist/_YukariSekai_ Same thing in the mangalist. |
I do not love shounen-ai and yaoi there, where it is not present. |
Aug 6, 2013 6:21 AM
#1149
Хелло! You forgot to import covers code. Add to the top of your CSS |
Aug 9, 2013 2:05 PM
#1150
Hahaido said: Хелло! You forgot to import covers code. Add to the top of your CSS Thank you very much. :) |
I do not love shounen-ai and yaoi there, where it is not present. |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |