New
Sep 15, 2013 7:11 AM
#1251
KingSimba said: Hey :) Ii have installed a custom skin for my anime and manga list. i like it a lot but the only problem is that the list is orderd by name and not by rating. there is a button on the top of the list where i can order the list by rating but i want it to be already orderd by rating by default. Thanks ahead for replays :D I've never seen such an option in the edit profile so there's nothing I can think of for that. When I linked ppl to my list before through my custom profile I would use the link to the list ordered by score, thats the only thing I can think of to do. Forgetfulness said: If my whole About Me is aligned center, is there any way to make a small section in it aligned left? Would look weird depends on profile but did you try something like [center]stuff u want centered[/center] stuff u want left [center]stuff u want center again[/center] |
Sep 15, 2013 10:47 AM
#1252
Forgetfulness said: ^ Well the thing is is that I want a certain part inside spoiler tags centered and I don't think something like that works :| [.center] [.spoiler] [./center] stuff I want centered [.center] [./spoiler] [./center] I don't see what that has to do with left then, because if you have [center] before a spoiler tag everything within the spoiler will be centered anyways. You don't need to stop centering after spoiler tag and restart it before closing it like in the example you just posted. So instead do this so I can get a clear idea of what you're asking- post part or all of your About Me, and point out the parts you want left or centered. Like put them in bold letters or describe them clearly. I can edit your post and read the original BBcode and try to align it from there. |
Sep 16, 2013 7:16 PM
#1253
Forgetfulness said: Shishio-kun said: Forgetfulness said: ^ Well the thing is is that I want a certain part inside spoiler tags centered and I don't think something like that works :| [.center] [.spoiler] [./center] stuff I want centered [.center] [./spoiler] [./center] I don't see what that has to do with left then, because if you have [center] before a spoiler tag everything within the spoiler will be centered anyways. You don't need to stop centering after spoiler tag and restart it before closing it like in the example you just posted. So instead do this so I can get a clear idea of what you're asking- post part or all of your About Me, and point out the parts you want left or centered. Like put them in bold letters or describe them clearly. I can edit your post and read the original BBcode and try to align it from there. Here: http://pastebin.ca/2452474 ^ I think that will work. I've never used pastebin before so yeah... As for what I want centered, About me > Favorite Quotes > just the text underneath the "Badass" section. Specifically "I hereby propose: My will shall create thy body and thy sword shall create my fate. Abiding by the summons of the Holy Grail, if thou dost accede to this will and reason, answer me! I hereby swear. I will be all that is good in the eternal world. I will be the disposer of evil in the eternal world. Thou, clad with the Great Trinity, come forth from the circle of constraint. Guardian of the Heavenly Scales!" – the Masters of Fate/Zero " I am the bone of my sword Steel is my body and fire is my blood I have created over a thousand blades Unknown to Death, Nor known to Life Have withstood pain to create many weapons Yet, those hands will never hold anything So as I pray, unlimited blade works." – Archer I still want the "Badass" itself and the spoiler button to be centered if possible. EDIT: LOL. I just looked back at my post and realized that I put "stuff I want centered". Sorry, that was supposed to be aligned left >.< Its already centered in your code and on your profile. Did you mean you want those quotes aligned left? |
Sep 17, 2013 9:52 AM
#1254
I've added information about global score and rank to my animelist. I'm using files that were generated by connecting to mal-api.com (is it even possible using official api?). When I want to refresh the data I have to manually execute the php script again. Doing this downloads the data from api and saves it in my own files, but it doesn't refresh the api. When I open an anime page in api in a browser and force reload it, it connects with MAL and updates info. Is there any way to refresh the api from php? (im using curl) Or should I just connect with MAL itself and extract info from anime pages? Or maybe there is a simpler way I don't know of? |
Sep 17, 2013 2:13 PM
#1255
Forgetfulness said: Yeah, I meant aligned left. Making a lot of typos. My bad -_- Doesn't look like it wants to be aligned left after the spoiler, with center end tags it cancels the spoiler right there. Left tags aren't valid either. So for that spot you'll have to left align the spoiler button first if you want the text in it left, or write the text aligned left on a clear pic then put that where the spoiler is. I'm no BBcode expert tho, so there might be another way someone can tell you. |
Sep 19, 2013 2:54 PM
#1256
Umm, I made a HTML that gives out a random link: https://dl.dropboxusercontent.com/u/144008148/random_css.htm How I made it: simple, I randomly came accross this site by coincidence: http://www.javascriptkit.com/javatutors/random2.shtml#.UjtARNJ7LHn I rewrote the code above immidiatly after I decided to have a looked in google for "form to load on submit", and WTF the first hit redirected me to a side where I found this and used the second post: http://www.velocityreviews.com/forums/t161954-convert-form-to-submit-on-load-instead-of-clicking-submit-button.html _ _ _ _ _ _ _ _ _ _ _ _ _ _ Anyway, I made this (and saved it as "random_css.htm", after having a look at a random HTML): https://dl.dropboxusercontent.com/u/144008148/random_css.txt Now, I want to know if you can somehow install this in CSS, so that each time a new list layout would show itself. Is something like this even possible ??? |
MonsterguySep 19, 2013 3:16 PM
Sep 19, 2013 11:07 PM
#1257
Monsterguy said: Umm, I made a HTML that gives out a random link: https://dl.dropboxusercontent.com/u/144008148/random_css.htm How I made it: simple, I randomly came accross this site by coincidence: http://www.javascriptkit.com/javatutors/random2.shtml#.UjtARNJ7LHn I rewrote the code above immidiatly after I decided to have a looked in google for "form to load on submit", and WTF the first hit redirected me to a side where I found this and used the second post: http://www.velocityreviews.com/forums/t161954-convert-form-to-submit-on-load-instead-of-clicking-submit-button.html _ _ _ _ _ _ _ _ _ _ _ _ _ _ Anyway, I made this (and saved it as "random_css.htm", after having a look at a random HTML): https://dl.dropboxusercontent.com/u/144008148/random_css.txt Now, I want to know if you can somehow install this in CSS, so that each time a new list layout would show itself. Is something like this even possible ??? You just have to rewrite it in php (using echo("@import\"blahblah.css\";")); instead of window.location, and add this: header("Content-type: text/css"); at the beginning. You'll be able to import this php file in css. |
Sep 20, 2013 1:39 AM
#1258
dzikibambus said: Monsterguy said: Umm, I made a HTML that gives out a random link: https://dl.dropboxusercontent.com/u/144008148/random_css.htm How I made it: simple, I randomly came accross this site by coincidence: http://www.javascriptkit.com/javatutors/random2.shtml#.UjtARNJ7LHn I rewrote the code above immidiatly after I decided to have a looked in google for "form to load on submit", and WTF the first hit redirected me to a side where I found this and used the second post: http://www.velocityreviews.com/forums/t161954-convert-form-to-submit-on-load-instead-of-clicking-submit-button.html _ _ _ _ _ _ _ _ _ _ _ _ _ _ Anyway, I made this (and saved it as "random_css.htm", after having a look at a random HTML): https://dl.dropboxusercontent.com/u/144008148/random_css.txt Now, I want to know if you can somehow install this in CSS, so that each time a new list layout would show itself. Is something like this even possible ??? You just have to rewrite it in php (using echo("@import"blahblah.css";")); instead of window.location, and add this: header("Content-type: text/css"); at the beginning. You'll be able to import this php file in css. OMG, I have no knowladge about php what so ever... But I do know that I can host it on specific servers that support php hosting only !!! _ _ _ _ _ _ So all I need would be a php content for such a thing, and to know what to write in place of CSS on myanimelist, specifically. Both things are essential, why if you can't call a php in myanimelist, than having a php is practically useless. God, this is way too much for me "alone", I'm just a little more than a begginer at CSS, with no knowlage of "HTML" or "php" what so ever...hehehe If possible could somebody help me create a php that would fit into a myanimelist CSS somehow (PHP for changing layouts/CSS randomly on page load on myanimelist, a so called "styleswitcher" that I would host on some other free server), I would very much appreciate it !!! _ _ _ _ _ _ _ _ _ _ _ _ Oh, I found this: http://www.namepros.com/programming/312140-resolved-php-inside-css.html http://html.net/forums/viewtopic.php?f=58&t=4619 so all I need is a small php code, but for imports, although now I'm puzzeled how this "small" php should even look like ??? php, if, else, echo,...(this is simply too much for me with no knowlage of PHP...hehehe) |
MonsterguySep 20, 2013 5:16 AM
Sep 20, 2013 5:28 AM
#1259
@Monsterguy I'm not really sure about writing php directly into MAL css. I'd say you need a php file with something like this: <?php header("Content-type: text/css"); $styles[0]="@import \"http://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Requests/Phantomrequiem.css\";"; $styles[1]="@import \"http://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Requests/Fighters.css\";"; echo($styles[(time()%sizeof($styles))]); echo("\n"); ?> You'll need to upload it to some web hosting, and then import it like any other css. My example: @import "http://student.agh.edu.pl/~suski/old/quotes.php"; |
Sep 20, 2013 6:12 AM
#1260
dzikibambus said: @Monsterguy I'm not really sure about writing php directly into MAL css. I'd say you need a php file with something like this: <?php header("Content-type: text/css"); $styles[0]="@import "http://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Requests/Phantomrequiem.css";"; $styles[1]="@import "http://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Requests/Fighters.css";"; echo($styles[(time()%sizeof($styles))]); echo("n"); ?> You'll need to upload it to some web hosting, and then import it like any other css. My example: @import "http://student.agh.edu.pl/~suski/old/quotes.php"; Woah, this works, it seriously works man thank you sooo much, I hosted it myself and I can do whatever I want within a php now !!! |
Sep 21, 2013 9:52 PM
#1261
Hi I'm just updating my profile BBCode, however, I'm having an issue with adding a link to a single image. I have used the combine url and img tag many times, but it's not working for [url=http://myanimelist.net/character/71121/Zoë_Hange] Could somebody please let me know where I went wrong or why it may not be working? :) Thanks |
Sep 22, 2013 12:11 AM
#1262
Sep 22, 2013 12:21 AM
#1263
Sep 24, 2013 2:06 PM
#1264
Can anyone tell me how to move the category buttons on this more to the right like inside the border of the background and how to change the color of the magenta when I hover over my list? https://www.dropbox.com/s/awpfa7q30d2l6l6/list.txt http://puu.sh/4zneL.jpg |
Sep 24, 2013 7:43 PM
#1265
PinkSheep said: Can anyone tell me how to move the category buttons on this more to the right like inside the border of the background and how to change the color of the magenta when I hover over my list? https://www.dropbox.com/s/awpfa7q30d2l6l6/list.txt http://puu.sh/4zneL.jpg This is to change the color of hover: tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } This is the side buttons, you adjust the left: -300px #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://i.imgur.com/W6rDL15.png); background-position:0 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:-300px; <--------------------(RIGHT HERE) padding:0; position:absolute; top:20px; width:263px; } |
Sep 24, 2013 10:28 PM
#1266
i want to do so that by hovering over the image on my list that the image of the anime shows up, could u tell me what code, or rather give me the code for that, thanks in advance |
Sep 25, 2013 8:01 AM
#1267
TheHolyPotato said: PinkSheep said: Can anyone tell me how to move the category buttons on this more to the right like inside the border of the background and how to change the color of the magenta when I hover over my list? https://www.dropbox.com/s/awpfa7q30d2l6l6/list.txt http://puu.sh/4zneL.jpg This is to change the color of hover: tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } This is the side buttons, you adjust the left: -300px #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://i.imgur.com/W6rDL15.png); background-position:0 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:-300px; <--------------------(RIGHT HERE) padding:0; position:absolute; top:20px; width:263px; } What do I change it to because it doesn't move when I change it Idk if I'm just doing it wrong x_x |
Sep 25, 2013 11:03 AM
#1268
olha2 said: i want to do so that by hovering over the image on my list that the image of the anime shows up, could u tell me what code, or rather give me the code for that, thanks in advance So you want only the codes for covers right ??? If so than, this goes on top of your CSS: and this goes at the end of your CSS: /************/ /* -covers- */ /************/ .hide { visibility: hidden; position: absolute !important; display: block !important; left: 584px !important; margin-top: -12px !important; width: 0px !important; height: 0px !important; transition: width .5s ease-in-out, height .5s ease-in-out .5s; -o-transition: width .5s ease-in-out, height .5s ease-in-out .5s; -moz-transition: width .5s ease-in-out, height .5s ease-in-out .5s; -webkit-transition: width .5s ease-in-out, height .5s ease-in-out .5s; border: solid 1px #ffffff; background-repeat: no-repeat !important; background-size: 105% 105%; border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 0 16px brown, inset 0 4px 5px rgba(200, 5, 0, .6), inset 0 1px 0 rgba(200, 5, 0, .6); -moz-box-shadow: 0 0 16px brown, inset 0 4px 5px rgba(200, 5, 0, .6), inset 0 1px 0 rgba(200, 5, 0, .6); -webkit-box-shadow: 0 0 16px brown, inset 0 4px 5px rgba(200, 5, 0, 0.6), inset 0 1px 0 rgba(200, 5, 0, 0.6); z-index: 15; } :hover + .hide { visibility: visible !important; width: 140px !important; height: 182px !important; } taken from: http://myanimelist.net/forum/?topicid=393393&show=80#msg22973599 |
MonsterguySep 26, 2013 3:26 AM
Sep 28, 2013 5:54 AM
#1269
First of all, a lot of thanks because your tutorials have helped me a lot to make my lists more in line with my tastes n_n And now I wanted to ask a few things: 1 - How to change the color of links "edit”, “add”, “more”, “-/-“, “+”, “edit (tags)” individually. 2 - In the rounded corners tutorial, it goes from the header to the category totals. But in my list, headers are images and category totals are transparent. So I wanted to know how to round the corners only from the sub-header to the last title. http://img62.imageshack.us/img62/5370/vjis.jpg 3 – How to control the distance between the category links. http://img20.imageshack.us/img20/6027/0d6b.jpg Thanks in advance and sorry for my English, it’s not my mother language ^^” |
Sep 28, 2013 11:23 PM
#1270
PinkSheep said: TheHolyPotato said: PinkSheep said: Can anyone tell me how to move the category buttons on this more to the right like inside the border of the background and how to change the color of the magenta when I hover over my list? https://www.dropbox.com/s/awpfa7q30d2l6l6/list.txt http://puu.sh/4zneL.jpg This is to change the color of hover: tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } This is the side buttons, you adjust the left: -300px #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://i.imgur.com/W6rDL15.png); background-position:0 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:-300px; <--------------------(RIGHT HERE) padding:0; position:absolute; top:20px; width:263px; } What do I change it to because it doesn't move when I change it Idk if I'm just doing it wrong x_x Well look at your code, this code(for paramerter you want to change) is written I don't even know how many times 7 times or more(including the main one !!!): #list_surround .status_selected, #list_surround .status_not_selected { left: -270px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -300px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -290px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -330px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -385px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -430px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -530px; } But it should only be written once, or the last paramerter is valid, all others are deleted/overwritten !!! So for you, the simplest way would be to only add another such code at the end of your existing code, with leaving everything else as it is: (* just write the number you want in place of "XXX" below, and after that copy-paste that whole code in "quote" into the end of your code, but remember that "XXX" number can be positive or negative with munus before the number, depending where you want tablets to be !!!) #list_surround .status_selected, #list_surround .status_not_selected { left: XXXpx; } |
Sep 29, 2013 1:25 AM
#1271
I waited, coz I'm not sure how to answer you, but OMG, this was too hard for me at the end, a visitor and lover of this club, but I did try my best, sorry... So, how to target those things you ask, I would try with those: 1) read in spoiler below: "edit” or “add”, “more” #list_surround small a:first-of-type:hover { } #list_surround small a:last-of-type:hover { } “-/-“, “+”, “edit (tags)” (I only know how to change this, if I can look at your list's layout along with what kind of colummns you have enabled at the moment, but BTW currently your list is on private...) 2) rounded corners (in spoiler below are only the corners on top, for the bottom I don't know how to do it, why it was never done before as far as I remember, maybe with "[href*="..."]" function in some kind of code ???) .table_header:first-of-type { border-radius: 10px 0 0 0; } .table_header:last-of-type { border-radius: 0 10px 0 0; } 3) I'm not sure about this one as well, coz your list is on private, but maybe with those codes (where you change width): #list_surround .status_selected, #list_surround .status_not_selected {} . . . _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ sorry, I'm more of a guy of practice, so I take everything (every list settings, with it's own layout) as a case of it's own and only than I start coding and testing with firebug (it's fast, easy, and the result works for others as well)... |
Sep 29, 2013 1:35 PM
#1272
Monsterguy said: PinkSheep said: TheHolyPotato said: PinkSheep said: Can anyone tell me how to move the category buttons on this more to the right like inside the border of the background and how to change the color of the magenta when I hover over my list? https://www.dropbox.com/s/awpfa7q30d2l6l6/list.txt http://puu.sh/4zneL.jpg This is to change the color of hover: tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } This is the side buttons, you adjust the left: -300px #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://i.imgur.com/W6rDL15.png); background-position:0 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:-300px; <--------------------(RIGHT HERE) padding:0; position:absolute; top:20px; width:263px; } What do I change it to because it doesn't move when I change it Idk if I'm just doing it wrong x_x Well look at your code, this code(for paramerter you want to change) is written I don't even know how many times 7 times or more(including the main one !!!): #list_surround .status_selected, #list_surround .status_not_selected { left: -270px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -300px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -290px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -330px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -385px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -430px; } #list_surround .status_selected, #list_surround .status_not_selected { left: -530px; } But it should only be written once, or the last paramerter is valid, all others are deleted/overwritten !!! So for you, the simplest way would be to only add another such code at the end of your existing code, with leaving everything else as it is: (* just write the number you want in place of "XXX" below, and after that copy-paste that whole code in "quote" into the end of your code, but remember that "XXX" number can be positive or negative with munus before the number, depending where you want tablets to be !!!) #list_surround .status_selected, #list_surround .status_not_selected { left: XXXpx; } That worked Is there any way to move it down also |
Oct 1, 2013 10:38 AM
#1273
I'm making a new about me section and I want it to have a classyish woodish style border around it, but I don't know how to do it for a section about as long as mine is now, is there a site that can make those kind of borders or a trick to stretching borders that long without looking so awkward. |
Oct 1, 2013 3:28 PM
#1274
clone4 said: I'm making a new about me section and I want it to have a classyish woodish style border around it, but I don't know how to do it for a section about as long as mine is now, is there a site that can make those kind of borders or a trick to stretching borders that long without looking so awkward. use a pattern for the border - no matter how long it is it'll look good and not stretched. here's an example: http://farm3.static.flickr.com/2797/4309462704_2ebb2a55d5.jpg if you don't know how to use it as a pattern in photoshop: open the image in PS, click edit > define pattern, name it and click ok, now click pattern stamp tool from the PS menu and select the pattern you created at the top. if you're not using photoshop then I have no advice to give you. except manually copy-pasting the image. |
Oct 2, 2013 2:40 AM
#1275
Hi! I recently watched the vid of yours on youtube about mal profile boarders and I found it very helpful! I would like to thank you for the useful info you provided me about BBCode and ask you some questions I have. Well, I am trying to make my profile look cool too, so I decided to add many different boarders about various stuff on my profile. I have found buttons and other images, but I want to add animated backgrounds too! (backgrounds with flashing lights for example) Do you know where I can find cool animated backgrounds? I would also like to know how to add other images to the ani backgrounds. If I just add the pictures to the animated background and then try to save my work on GIMP 2 the extracted image will have a problem, the buttons and the other pics added to the background will banish every few seconds as if they were part of the animated background. How can I add png images to an animated gif without having this problem? And one last question. Sometimes when I combine images the color of some of them changes according to the largest ones. For example let's say I want to add a small red button to a dark blue background. The button's color will become dark blue.(this happens with certain pictures though) Do you know how I can fix this problem? |
Oct 2, 2013 11:08 AM
#1276
This is my question its about the square layout. I have been trying to make my own topbar icons. however it did not work out... just replaced the old bar.css with: Then I uploaded it to Speedy Share and have given a link to that but it doesnt work? Any ideas? Read more at http://myanimelist.net/forum/?topicid=459189&show=120#QCJqvUCYtVMUVpPk.99 |
Oct 2, 2013 11:47 AM
#1277
GOSCIZOR said: Do you know where I can find cool animated backgrounds? I've done that animated backgrounds with png elements on them thing. Scroll down to Manga style 2012 layout on my blog http://myanimelist.net/blog.php?eid=719966 I got the animated bgs from looking up animated GIFs on Danbooru and used them for the "manga panels". I guess you could do the same but its honestly very hard to find animated GIFs you can use for this kinda thing that also can be used creatively.. list of all image sites and what you can find on them. The link to animated gifs is right under Danbooru: http://myanimelist.net/forum/?topicid=504129 We also have some topics on making your own GIFs http://myanimelist.net/forum/?topicid=419631 GOSCIZOR said: I would also like to know how to add other images to the ani backgrounds. If I just add the pictures to the animated background and then try to save my work on GIMP 2 the extracted image will have a problem, the buttons and the other pics added to the background will banish every few seconds as if they were part of the animated background. How can I add png images to an animated gif without having this problem?? Ok well I have GIMP 2 too I think, if you're using the same one I have in the video, to overlay a single PNG over a bunch of animation frames you need a special script in the program and it was a huge pain in the ass. Unfortunately I can't find the script anymore even- the links I find thru Google are dead! Without this, I couldn't overlay PNGs on GIF's frames easily and I would get the kinda error you had. There might be a manual way someone may know of but I don't know cuz I used that script for my version of Gimp. You can Google for it, but honestly Gimp is the WORST program for animations lol. I would use Jasc animation shop or Photoshop CS2 (I think CS2, its the free one). They're much more intuitive and easy to use for this. If you get either of those, I can show you how to do it in those programs depending on which one you get. Both are free, I'd recommend Jasc, and its so easy to use. GOSCIZOR said: Hi! And one last question. Sometimes when I combine images the color of some of them changes according to the largest ones. For example let's say I want to add a small red button to a dark blue background. The button's color will become dark blue.(this happens with certain pictures though) Do you know how I can fix this problem? Hmm I don't really understand what you were doing exactly cuz that shouldn't happen when overlaying images or even certain pictures. Do you mean are you using the color fill tool- lower the number options on the tool if so and see if that helps. If not can you take some screenshots of whats happening in GIMP or show me the images you're referring to so I can recreate it? If I know exactly what I can give you some solutions. To take a screenshot, click printscreen on your keyboard and paste into any graphic design progrem even Microsoft Paint. |
Oct 2, 2013 12:14 PM
#1278
Shotaro96 said: This is my question its about the square layout. I have been trying to make my own topbar icons. however it did not work out... just replaced the old bar.css with: Then I uploaded it to Speedy Share and have given a link to that but it doesnt work? Any ideas? Read more at http://myanimelist.net/forum/?topicid=459189&show=120#QCJqvUCYtVMUVpPk.99 It seems like you're trying to import the CSS thru "speedy share", I don't use that; just use Dropbox as I have a tutorial on importing already: http://myanimelist.net/forum/?topicid=411779 You'll simply post your topbar CSS in step 1 into the notepad, then follow the rest of the steps and link them to your layout. It takes only minutes! edit: I've actually made your top bar into an import already, and put it under the "top bar icons" line in the square layout (the original one needs to be replaced). This is the layout with import in it. I named your CSS Miyatopbar.css. You should still do this yourself, so you can edit it in the future, but you can use this line and layout for now if you wish. I can also take down the import if you wish for some reason. I used it on my list and all the icons show up! Very nice job on it! full CSS layout: /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Special/miyatopbar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://s10.postimg.org/7evg36855/totoro2.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: rgb(39, 255, 195);} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ |
Oct 5, 2013 2:15 AM
#1279
Shishio-kun said: Shotaro96 said: This is my question its about the square layout. I have been trying to make my own topbar icons. however it did not work out... just replaced the old bar.css with: Then I uploaded it to Speedy Share and have given a link to that but it doesnt work? Any ideas? Read more at http://myanimelist.net/forum/?topicid=459189&show=120#QCJqvUCYtVMUVpPk.99 It seems like you're trying to import the CSS thru "speedy share", I don't use that; just use Dropbox as I have a tutorial on importing already: http://myanimelist.net/forum/?topicid=411779 You'll simply post your topbar CSS in step 1 into the notepad, then follow the rest of the steps and link them to your layout. It takes only minutes! edit: I've actually made your top bar into an import already, and put it under the "top bar icons" line in the square layout (the original one needs to be replaced). This is the layout with import in it. I named your CSS Miyatopbar.css. You should still do this yourself, so you can edit it in the future, but you can use this line and layout for now if you wish. I can also take down the import if you wish for some reason. I used it on my list and all the icons show up! Very nice job on it! full CSS layout: /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Special/miyatopbar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://s10.postimg.org/7evg36855/totoro2.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: rgb(39, 255, 195);} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ thx alot that helped |
Oct 6, 2013 12:43 PM
#1280
Hi. Sorry if this is the wrong section to post this. I need some help with my anime list code. I have my anime list on private for certain reasons but I will provide pictures so you can see the problem. By the way, I literally don't know anything about this code stuff so I'm a complete noob. I just copied and pasted bits from different places and the code is probably all a mess. Anyway.... First of all, here is what my list looked like: http://tinypic.com/view.php?pic=23i7ypv&s=5#.UlG6vVCkquQ To suit the theme, I decided to edit the top bar to make the dropdowns red instead of yellow. For the original top bar with the yellow menu, there was a dropbox link that contained the code. This is the link I'd copied: https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Special/SAObar.css.css I edited this to make it red. Although the yellow menu did turn red, all the font on my list changed. Here's a picture: http://tinypic.com/view.php?pic=35bv7mq&s=5#.UlG8PlCkquQ I tried whatever I could think of but I couldn't get the font back. As I said earlier, I'm a noob when it comes to this stuff so if you know how to fix it, please tell me in a simple way if possible. Thank you. |
Dwo0wBzf9hOnDhPwOct 6, 2013 1:43 PM
Oct 6, 2013 3:45 PM
#1281
@SinisterClown33 It's probably a simple mistake, but it'll be hard to find it without your code. You have to make list public or post your entire css here. If I was to guess the mistake is something like putting some code before imports, or not closing a selector. |
Oct 7, 2013 7:03 AM
#1282
http://myanimelist.net/forum/?topicid=412787&show=0 Do anyone know how to move that top bar into the left alignment instead of the right? @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url(none) silver; } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: url("http://i.imgur.com/lh8vuSc.png") center no-repeat; background-size: contain; display: inline-block !important; height: 100% !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100% !important; z-index: -1 !important;} /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #B42030; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* TABLE HEADER */ .table_header { background-color: rgba(65, 35, 95, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* TABLE ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* TABLE ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } table[class^="header_"] + table{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(72, 64, 87, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } http://myanimelist.net/animelist/Crassa |
Oct 7, 2013 7:57 AM
#1283
All top bar mods are found here: http://myanimelist.net/forum/?topicid=449097 Use this top bar instead in your code: @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSLeftFixed.css"; /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url(none) silver; } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: url("http://i.imgur.com/lh8vuSc.png") center no-repeat; background-size: contain; display: inline-block !important; height: 100% !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100% !important; z-index: -1 !important;} /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #B42030; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* TABLE HEADER */ .table_header { background-color: rgba(65, 35, 95, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* TABLE ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* TABLE ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } table[class^="header_"] + table{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(72, 64, 87, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Oct 7, 2013 8:23 AM
#1284
Monsterguy said: I waited, coz I'm not sure how to answer you, but OMG, this was too hard for me at the end, a visitor and lover of this club, but I did try my best, sorry... So, how to target those things you ask, I would try with those: 1) read in spoiler below: "edit” or “add”, “more” #list_surround small a:first-of-type:hover { } #list_surround small a:last-of-type:hover { } “-/-“, “+”, “edit (tags)” (I only know how to change this, if I can look at your list's layout along with what kind of colummns you have enabled at the moment, but BTW currently your list is on private...) 2) rounded corners (in spoiler below are only the corners on top, for the bottom I don't know how to do it, why it was never done before as far as I remember, maybe with "[href*="..."]" function in some kind of code ???) .table_header:first-of-type { border-radius: 10px 0 0 0; } .table_header:last-of-type { border-radius: 0 10px 0 0; } 3) I'm not sure about this one as well, coz your list is on private, but maybe with those codes (where you change width): #list_surround .status_selected, #list_surround .status_not_selected {} . . . _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ sorry, I'm more of a guy of practice, so I take everything (every list settings, with it's own layout) as a case of it's own and only than I start coding and testing with firebug (it's fast, easy, and the result works for others as well)... I'm sorry, I didn't notice that my list was on private o-o I changed it, now it's public. Thanks a lot for trying anyway ^^ And... 1) That didn't work for me. 2) This worked, thanks, though I wonder if it's even possible to round the bottom corners, as you said it was never done before... 3) Hum...I didn't really understand that =.= |
Oct 7, 2013 10:10 AM
#1285
dzikibambus said: @SinisterClown33 It's probably a simple mistake, but it'll be hard to find it without your code. You have to make list public or post your entire css here. If I was to guess the mistake is something like putting some code before imports, or not closing a selector. Here is my code. I'm sorry if it's all a mess. Like I said before, I'm a noob and copied and pasted different parts of the code. /*bottom category menu*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/bottommenu.css") all; /*thin top bar*/ #mal\_control\_strip { z-index: 2 !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 40px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; transition: all 0.4s ease 0s; width: 100px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-right: 42px !important; top: 20px !important; width: 202px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: rgba(255,255,255,0.5); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; transition: opacity 0.4s ease-in-out 0s; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #8f2830 !important; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px !important; display: block; font: 13px/17px 'Arial',sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: rgba(255, 255, 255, 0.9) !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.5) !important; border: medium none; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px #f1a804; border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; transition: all 0.25s ease-in-out 0s; width: 0; } #mal_cs_powered a img:hover { background-color: rgba(12, 46, 196, 0.9); } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://i41.tinypic.com/2mgjxpg.png"); right: 178px; background-color: transparent; } #mal_cs_listinfo:hover { background-image: url("http://i39.tinypic.com/15g2sqt.png"); background-color: transparent; } #mal_cs_listinfo:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10; } #mal_cs_listinfo:hover:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 200px !important; background-color: transparent; z-index: -10; } #mal_cs_links { background-image: url("http://i43.tinypic.com/anfomg.png"); right: 122px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i42.tinypic.com/mtwf45.png"); } #mal_cs_links:before { content: ""; position: fixed !important; top: -0px !Important; right: 105px !Important; height: 20px !important; width: 70px !important; background-color: transparent; z-index: -10; } #mal_cs_otherlinks { background-image: url("http://i42.tinypic.com/nbciyp.png"); right: 66px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i43.tinypic.com/jz7e5w.png"); } #mal_cs_otherlinks:before { content: ""; position: fixed !important; top: -0px !Important; right: 55px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10; } #mal_cs_powered { background-image: url("http://i41.tinypic.com/2q9c8p0.png"); position: fixed !important; right: 10px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i40.tinypic.com/nnutt1.png"); } #mal_cs_powered:before { content: ""; position: fixed !important; top: -0px !Important; right: 0px !Important; height: 20px !important; width: 55px !important; background-color: transparent; z-index: -10; } # { background: url("http://i38.tinypic.com/2j4ojlt.png") repeat scroll 0 0 transparent !important; position: fixed; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #{ height: 24px !important; } /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Jim+Nightshade"); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i40.tinypic.com/2qiqzhz.png); background-attachment: fixed; background-size: 100%; text-shadow: 1px 0px 4px #800000; background-position: center top 20%; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:rgba(11, 11, 20, 0.700); color:white; font-family: "Jim Nightshade"; font-size:30px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: center; text-shadow: 3px -1px 5px #0C0C0C; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:rgba(14, 14, 25, 0.675); } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:rgb(255, 255, 255); font-family: "Jim Nightshade"; font-size:22px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:#dadada; font-size:20px; font-family: "Jim Nightshade"; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: 170px; right: 0px !important; left: 0px !important;} } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: absolute !important; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#d31a1a; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i1232.photobucket.com/albums/ff367/coolspot21/frame6518-1.png); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0, 0, 0, 0.900); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } .status_not_selected a, .status_not_selected a:visited { color: white; font-family: "Jim Nightshade"; font-size: 20px; left: -150px; position: center; top: 10px; } .status_selected a, .status_selected a:visited { color: white; font-family: "Jim Nightshade"; font-size: 20px; font-weight: bold; left: -140px; padding-top: 20px; position: center; text-decoration: blink; top: 10px; } .status_selected, .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); border: 0 none; bottom: 0; height: 25px; margin-left: -600px; padding-left: 601px; padding-right: 100px; position: fixed; width: 150px; } .status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 172px; padding-left: 0; padding-right: 70px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 322px; padding-left: 0; padding-right: 90px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 460px; padding-left: 0; padding-right: 82px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 616px; padding-left: 0; padding-right: 44px; position: fixed; width: 150px; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 773px; padding-left: 0; padding-right: 500px; position: fixed; width: 150px; } #copyright { bottom: 0; color: rgb(255, 255, 255); font-family: "Jim Nightshade"; font-size: 20px; height: 65px; margin: 0 auto; margin-bottom: 30px !important; border-radius: 20px; padding: 10px; position: center; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } |
Oct 7, 2013 10:17 AM
#1286
SinisterClown33 said: dzikibambus said: @SinisterClown33 It's probably a simple mistake, but it'll be hard to find it without your code. You have to make list public or post your entire css here. If I was to guess the mistake is something like putting some code before imports, or not closing a selector. Here is my code. I'm sorry if it's all a mess. Like I said before, I'm a noob and copied and pasted different parts of the code. All imports have to placed at the very beginning of the code, you just have to move the Fonts section to the top. Like this: /*bottom category menu*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/bottommenu.css") all; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Jim+Nightshade"); /*thin top bar*/ #mal\_control\_strip { z-index: 2 !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 40px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; transition: all 0.4s ease 0s; width: 100px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-right: 42px !important; top: 20px !important; width: 202px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: rgba(255,255,255,0.5); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; transition: opacity 0.4s ease-in-out 0s; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #8f2830 !important; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px !important; display: block; font: 13px/17px 'Arial',sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: rgba(255, 255, 255, 0.9) !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.5) !important; border: medium none; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px #f1a804; border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; transition: all 0.25s ease-in-out 0s; width: 0; } #mal_cs_powered a img:hover { background-color: rgba(12, 46, 196, 0.9); } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://i41.tinypic.com/2mgjxpg.png"); right: 178px; background-color: transparent; } #mal_cs_listinfo:hover { background-image: url("http://i39.tinypic.com/15g2sqt.png"); background-color: transparent; } #mal_cs_listinfo:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10; } #mal_cs_listinfo:hover:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 200px !important; background-color: transparent; z-index: -10; } #mal_cs_links { background-image: url("http://i43.tinypic.com/anfomg.png"); right: 122px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i42.tinypic.com/mtwf45.png"); } #mal_cs_links:before { content: ""; position: fixed !important; top: -0px !Important; right: 105px !Important; height: 20px !important; width: 70px !important; background-color: transparent; z-index: -10; } #mal_cs_otherlinks { background-image: url("http://i42.tinypic.com/nbciyp.png"); right: 66px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i43.tinypic.com/jz7e5w.png"); } #mal_cs_otherlinks:before { content: ""; position: fixed !important; top: -0px !Important; right: 55px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10; } #mal_cs_powered { background-image: url("http://i41.tinypic.com/2q9c8p0.png"); position: fixed !important; right: 10px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i40.tinypic.com/nnutt1.png"); } #mal_cs_powered:before { content: ""; position: fixed !important; top: -0px !Important; right: 0px !Important; height: 20px !important; width: 55px !important; background-color: transparent; z-index: -10; } # { background: url("http://i38.tinypic.com/2j4ojlt.png") repeat scroll 0 0 transparent !important; position: fixed; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #{ height: 24px !important; } /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i40.tinypic.com/2qiqzhz.png); background-attachment: fixed; background-size: 100%; text-shadow: 1px 0px 4px #800000; background-position: center top 20%; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:rgba(11, 11, 20, 0.700); color:white; font-family: "Jim Nightshade"; font-size:30px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: center; text-shadow: 3px -1px 5px #0C0C0C; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:rgba(14, 14, 25, 0.675); } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:rgb(255, 255, 255); font-family: "Jim Nightshade"; font-size:22px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:#dadada; font-size:20px; font-family: "Jim Nightshade"; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: 170px; right: 0px !important; left: 0px !important;} } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: absolute !important; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#d31a1a; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i1232.photobucket.com/albums/ff367/coolspot21/frame6518-1.png); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0, 0, 0, 0.900); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } .status_not_selected a, .status_not_selected a:visited { color: white; font-family: "Jim Nightshade"; font-size: 20px; left: -150px; position: center; top: 10px; } .status_selected a, .status_selected a:visited { color: white; font-family: "Jim Nightshade"; font-size: 20px; font-weight: bold; left: -140px; padding-top: 20px; position: center; text-decoration: blink; top: 10px; } .status_selected, .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); border: 0 none; bottom: 0; height: 25px; margin-left: -600px; padding-left: 601px; padding-right: 100px; position: fixed; width: 150px; } .status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 172px; padding-left: 0; padding-right: 70px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 322px; padding-left: 0; padding-right: 90px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 460px; padding-left: 0; padding-right: 82px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 616px; padding-left: 0; padding-right: 44px; position: fixed; width: 150px; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 773px; padding-left: 0; padding-right: 500px; position: fixed; width: 150px; } #copyright { bottom: 0; color: rgb(255, 255, 255); font-family: "Jim Nightshade"; font-size: 20px; height: 65px; margin: 0 auto; margin-bottom: 30px !important; border-radius: 20px; padding: 10px; position: center; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } Font should work now. |
Oct 7, 2013 10:25 AM
#1287
dzikibambus said: SinisterClown33 said: dzikibambus said: @SinisterClown33 It's probably a simple mistake, but it'll be hard to find it without your code. You have to make list public or post your entire css here. If I was to guess the mistake is something like putting some code before imports, or not closing a selector. Here is my code. I'm sorry if it's all a mess. Like I said before, I'm a noob and copied and pasted different parts of the code. All imports have to placed at the very beginning of the code, you just have to move the Fonts section to the top. Like this: /*bottom category menu*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/bottommenu.css") all; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Jim+Nightshade"); /*thin top bar*/ #mal_control_strip { z-index: 2 !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 40px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; transition: all 0.4s ease 0s; width: 100px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-right: 42px !important; top: 20px !important; width: 202px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: rgba(255,255,255,0.5); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; transition: opacity 0.4s ease-in-out 0s; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #8f2830 !important; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px !important; display: block; font: 13px/17px 'Arial',sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: rgba(255, 255, 255, 0.9) !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.5) !important; border: medium none; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px #f1a804; border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; transition: all 0.25s ease-in-out 0s; width: 0; } #mal_cs_powered a img:hover { background-color: rgba(12, 46, 196, 0.9); } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://i41.tinypic.com/2mgjxpg.png"); right: 178px; background-color: transparent; } #mal_cs_listinfo:hover { background-image: url("http://i39.tinypic.com/15g2sqt.png"); background-color: transparent; } #mal_cs_listinfo:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10; } #mal_cs_listinfo:hover:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 200px !important; background-color: transparent; z-index: -10; } #mal_cs_links { background-image: url("http://i43.tinypic.com/anfomg.png"); right: 122px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i42.tinypic.com/mtwf45.png"); } #mal_cs_links:before { content: ""; position: fixed !important; top: -0px !Important; right: 105px !Important; height: 20px !important; width: 70px !important; background-color: transparent; z-index: -10; } #mal_cs_otherlinks { background-image: url("http://i42.tinypic.com/nbciyp.png"); right: 66px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i43.tinypic.com/jz7e5w.png"); } #mal_cs_otherlinks:before { content: ""; position: fixed !important; top: -0px !Important; right: 55px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10; } #mal_cs_powered { background-image: url("http://i41.tinypic.com/2q9c8p0.png"); position: fixed !important; right: 10px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i40.tinypic.com/nnutt1.png"); } #mal_cs_powered:before { content: ""; position: fixed !important; top: -0px !Important; right: 0px !Important; height: 20px !important; width: 55px !important; background-color: transparent; z-index: -10; } # { background: url("http://i38.tinypic.com/2j4ojlt.png") repeat scroll 0 0 transparent !important; position: fixed; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #{ height: 24px !important; } /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i40.tinypic.com/2qiqzhz.png); background-attachment: fixed; background-size: 100%; text-shadow: 1px 0px 4px #800000; background-position: center top 20%; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:rgba(11, 11, 20, 0.700); color:white; font-family: "Jim Nightshade"; font-size:30px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: center; text-shadow: 3px -1px 5px #0C0C0C; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:rgba(14, 14, 25, 0.675); } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:rgb(255, 255, 255); font-family: "Jim Nightshade"; font-size:22px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:#dadada; font-size:20px; font-family: "Jim Nightshade"; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: 170px; right: 0px !important; left: 0px !important;} } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: absolute !important; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#d31a1a; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i1232.photobucket.com/albums/ff367/coolspot21/frame6518-1.png); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0, 0, 0, 0.900); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } .status_not_selected a, .status_not_selected a:visited { color: white; font-family: "Jim Nightshade"; font-size: 20px; left: -150px; position: center; top: 10px; } .status_selected a, .status_selected a:visited { color: white; font-family: "Jim Nightshade"; font-size: 20px; font-weight: bold; left: -140px; padding-top: 20px; position: center; text-decoration: blink; top: 10px; } .status_selected, .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); border: 0 none; bottom: 0; height: 25px; margin-left: -600px; padding-left: 601px; padding-right: 100px; position: fixed; width: 150px; } .status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 172px; padding-left: 0; padding-right: 70px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 322px; padding-left: 0; padding-right: 90px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 460px; padding-left: 0; padding-right: 82px; position: fixed; width: 150px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 616px; padding-left: 0; padding-right: 44px; position: fixed; width: 150px; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image: url("http://i40.tinypic.com/rtond3.jpg"); bottom: 0; height: 25px; margin-left: 773px; padding-left: 0; padding-right: 500px; position: fixed; width: 150px; } #copyright { bottom: 0; color: rgb(255, 255, 255); font-family: "Jim Nightshade"; font-size: 20px; height: 65px; margin: 0 auto; margin-bottom: 30px !important; border-radius: 20px; padding: 10px; position: center; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } Font should work now. Thanks a lot! It worked :) |
Oct 7, 2013 2:03 PM
#1289
BaragakiYoru said: First of all, a lot of thanks because your tutorials have helped me a lot to make my lists more in line with my tastes n_n And now I wanted to ask a few things: 3 – How to control the distance between the category links. http://img20.imageshack.us/img20/6027/0d6b.jpg Thanks in advance and sorry for my English, it’s not my mother language ^^” I've done this manually for your list (it wouldn't wotk for another list), but you have to copy/paste the whole code since it would be confusing to tell you which parts to delete from your code. this is how it looks like: http://i.imgur.com/LCIeuVW.png this is the code for the whole layout (I have edited only the category menu) @import url(http://fonts.googleapis.com/css?family=Neucha); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://img32.imageshack.us/img32/5310/ntbd.jpg); background-attachment: fixed;} /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:transparent; color:darkgray; font-family: Tekton Pro Ext; font-size:20px; text-align: center;} /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; color: black; font-family: Neucha; font-size: 15px; border-width: 1px 1px 1px 0px; border-style: none; border-color: #000000; background-color: #5F4279; text-align: center; text-transform: uppercase; padding:6px;} a.table_headerLink { color: black; font-family: Neucha; font-size: 15px; text-align: center;} /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:lightslateblue; font-family:Corbel; font-size:11px;} /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, #grand_totals, #copyright { color:darkgray; font-family:Corbel; font-size:11px; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:650px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:darkslateblue; text-decoration:none;} .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:5px;} .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:5px;} .thickbox { color:cyan; font-family:fantasy; font-size:12px;} .header_title { height:52px; padding:2px;} .table_header { border-width:0; font-weight:bold; padding:2px;} .category_totals { height:30px;} #copyright, #grand_totals { text-align: center; margin:0 auto;} body { background-size: cover;} /* REMOVE LINES FROM MENU BAR */ #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important;} /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 The codes control the list in this order: odd numbered rows, even numbered rows, category totals, grand totals, copyright. */ .td1 { background: none repeat scroll 0 0 rgba(21, 21, 21, 0.85) !important; } .td2 { background: none repeat scroll 0 0 rgba(66, 66, 66, 0.85) !important;} .category_totals, #grand_totals, #copyright { background: none !important;} /* COPYRIGHT SECTION If you remove the color it will be the default color set by the layout. You can add a new background image in the parenthesis, or change the color of the copyright section from transparent to something else. You can also change the color of the text which is white by default. You can increase height with padding top and bottom, these are the spaces above and below the copyright text. If you want the copyright section fixed to the bottom, put "fixed" after position: but without quotations. You can increase width too by adding a px amount, for example 600px, after width: */ #copyright, #copyright:hover { padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; color: darkgray; bottom: 0;} /* COPYRIGHT AFTER TEXT MSG Whats posted after Content is what it will say after the main copyright info. You can change it to what you want and it will leave the main copyright text alone. It can be a huge long message and you can change the color of the text here. Make sure you leave a space between the quotation mark after Content: and beginning of msg. Please have the courtesy to leave a link to my group somehow (as in by default). If you remove the color it will be the default color of the copyright. Increase padding-left number to put some space between your text and the previous default text. */ #copyright:after { color: lightgray; Content: "Custom CSS by BaragakiYoru"; text-align: center; padding-left: 5px;} /* COPYRIGHT LINKS Change the color of the links in your text here. To have it the same as the copyright default text, remove 'blue'. */ #copyright a { background:; color:lightslateblue;} /* FOREGROUND This originally puts an image in front of the very bottom of the list at all times. To change the background, change the link in parenthesis after "background: url" You can also change the rest of the background settings to suit the image you're trying to put in there. Don't touch the other options below background unless you really know what you're doing. Lower Z-index to -1 or less to put it behind the list. */ #inlineContent { background-image: url(http://i39.tinypic.com/2exr03p.png); bottom: 0; display: inline !important; height: 85px; margin-bottom: 0; position: fixed; right: 0px; width: 100%; z-index: 10 !important;} /* Anime List only CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://img842.imageshack.us/img842/8728/9hrm.png); height: 133px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://img163.imageshack.us/img163/9755/jt28.png); height: 135px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://img163.imageshack.us/img163/3567/qf5m.png); height: 135px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://img716.imageshack.us/img716/7230/ycmt.png); height: 130px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://img708.imageshack.us/img708/2152/6am0.png); height: 155px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:;} /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important;} /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody { background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important;} #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; z-index: 10; width: 150px !important;} #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px !important;} #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s; transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important;} #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1;} #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important;} #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6) !important; border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px 'Arial', sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none;} #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0;} #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #403C5A !important;} #mal_cs_listinfo strong a strong { font-weight: normal;} #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF;} #mal_cs_otherlinks strong a { background: none transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF;} #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important;} #mal_cs_powered:hover a { opacity: 1;} #mal_cs_powered a img { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0;} #mal_cs_powered a img:hover { background-color: #403C5A;} #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative;} #searchBox { box-sizing: border-box; -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px;} #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;} #searchListButton { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px !important; top: 14px !important; width: 0;} #mal_cs_listinfo { background-image: url("http://img845.imageshack.us/img845/8608/ptkp.png"); right: 106px;} #mal_cs_listinfo:hover { background-image: url("http://img824.imageshack.us/img824/3051/d79l.png");} #mal_cs_links { background-image: url("http://img35.imageshack.us/img35/5873/bog7.png"); right: 72px !important; z-index: 9;} #mal_cs_links:hover { background-image: url("http://img818.imageshack.us/img818/9403/egyb.png");} #mal_cs_otherlinks { background-image: url("http://img541.imageshack.us/img541/656/x27r.png"); right: 38px !important; z-index: 8;} #mal_cs_otherlinks:hover { background-image: url("http://img34.imageshack.us/img34/7704/unqj.png");} #mal_cs_powered { background-image: url("http://img163.imageshack.us/img163/3715/9y12.png"); right: 4px !important; z-index: 7; position: fixed !important;} #mal_cs_powered:hover { background-image: url("http://img690.imageshack.us/img690/5742/nqz2.png");} #mal\_control\_strip { background: transparent !important;} #mal_cs_pic img { display: none;} #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important;} .table_header { padding: 6px !important;} /* Animetitle's box width */ td:nth-of-type(2) { width: 200px;} /* Which 'status' up top is selected? */ .status_selected, .status_not_selected { font-weight: normal !important; background-color: #0f0f0f !important; font-family: Corbel !important; text-transform: uppercase !important; height: 26px;} .status_selected a { color: #343434 !important; text-decoration: line-through !important; } .status_selected a:hover { color: darkslateblue !important;} .status_not_selected a { color: #343434 !important;} .status_not_selected a:hover { color: darkslateblue !important;} .status_selected, .status_not_selected { width: 120px; padding-left: 30px; padding-right: 16px; text-align: left !important;} .status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected { width: 61px; padding-left: 18px; padding-right: 18px; text-align: left !important;} .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected { width: 50px; padding-left: 17px; padding-right: 17px; text-align: left !important;} .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { width: 47px; padding-left: 18px; padding-right: 18px; text-align: left !important;} .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { width: 87px; padding-left: 17px; padding-right: 17px; text-align: left !important;} .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { width: 57px; padding-left: 16px; padding-right: 34px; text-align: left !important;} |
nymphiaeOct 7, 2013 4:32 PM
Oct 7, 2013 2:58 PM
#1290
kuronekodesu said: I've done this manually for your list (it wouldn't wotk for another list), but you have to copy/paste the whole code since it would be confusing to tell you which parts to delete from your code. this is how it looks like: http://i.imgur.com/LCIeuVW.png this is the code for the whole layout (I have edited only the category menu) @import url(http://fonts.googleapis.com/css?family=Neucha); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://img32.imageshack.us/img32/5310/ntbd.jpg); background-attachment: fixed;} /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:transparent; color:darkgray; font-family: Tekton Pro Ext; font-size:20px; text-align: center;} /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; color: black; font-family: Neucha; font-size: 15px; border-width: 1px 1px 1px 0px; border-style: none; border-color: #000000; background-color: #5F4279; text-align: center; text-transform: uppercase; padding:6px;} a.table_headerLink { color: black; font-family: Neucha; font-size: 15px; text-align: center;} /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:lightslateblue; font-family:Corbel; font-size:11px;} /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, #grand_totals, #copyright { color:darkgray; font-family:Corbel; font-size:11px; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:650px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:darkslateblue; text-decoration:none;} .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:5px;} .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:5px;} .thickbox { color:cyan; font-family:fantasy; font-size:12px;} .header_title { height:52px; padding:2px;} .table_header { border-width:0; font-weight:bold; padding:2px;} .category_totals { height:30px;} #copyright, #grand_totals { text-align: center; margin:0 auto;} body { background-size: cover;} /* REMOVE LINES FROM MENU BAR */ #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important;} /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 The codes control the list in this order: odd numbered rows, even numbered rows, category totals, grand totals, copyright. */ .td1 { background: none repeat scroll 0 0 rgba(21, 21, 21, 0.85) !important; } .td2 { background: none repeat scroll 0 0 rgba(66, 66, 66, 0.85) !important;} .category_totals, #grand_totals, #copyright { background: none !important;} /* COPYRIGHT SECTION If you remove the color it will be the default color set by the layout. You can add a new background image in the parenthesis, or change the color of the copyright section from transparent to something else. You can also change the color of the text which is white by default. You can increase height with padding top and bottom, these are the spaces above and below the copyright text. If you want the copyright section fixed to the bottom, put "fixed" after position: but without quotations. You can increase width too by adding a px amount, for example 600px, after width: */ #copyright, #copyright:hover { padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; color: darkgray; bottom: 0;} /* COPYRIGHT AFTER TEXT MSG Whats posted after Content is what it will say after the main copyright info. You can change it to what you want and it will leave the main copyright text alone. It can be a huge long message and you can change the color of the text here. Make sure you leave a space between the quotation mark after Content: and beginning of msg. Please have the courtesy to leave a link to my group somehow (as in by default). If you remove the color it will be the default color of the copyright. Increase padding-left number to put some space between your text and the previous default text. */ #copyright:after { color: lightgray; Content: "Custom CSS by BaragakiYoru"; text-align: center; padding-left: 5px;} /* COPYRIGHT LINKS Change the color of the links in your text here. To have it the same as the copyright default text, remove 'blue'. */ #copyright a { background:; color:lightslateblue;} /* FOREGROUND This originally puts an image in front of the very bottom of the list at all times. To change the background, change the link in parenthesis after "background: url" You can also change the rest of the background settings to suit the image you're trying to put in there. Don't touch the other options below background unless you really know what you're doing. Lower Z-index to -1 or less to put it behind the list. */ #inlineContent { background-image: url(http://i39.tinypic.com/2exr03p.png); bottom: 0; display: inline !important; height: 85px; margin-bottom: 0; position: fixed; right: 0px; width: 100%; z-index: 10 !important;} /* Anime List only CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://img842.imageshack.us/img842/8728/9hrm.png); height: 133px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://img163.imageshack.us/img163/9755/jt28.png); height: 135px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://img163.imageshack.us/img163/3567/qf5m.png); height: 135px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://img716.imageshack.us/img716/7230/ycmt.png); height: 130px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat;} /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://img708.imageshack.us/img708/2152/6am0.png); height: 155px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:;} /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important;} /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody { background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important;} #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; z-index: 10; width: 150px !important;} #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px !important;} #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s; transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important;} #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1;} #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important;} #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6) !important; border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px 'Arial', sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none;} #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0;} #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #403C5A !important;} #mal_cs_listinfo strong a strong { font-weight: normal;} #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF;} #mal_cs_otherlinks strong a { background: none transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF;} #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important;} #mal_cs_powered:hover a { opacity: 1;} #mal_cs_powered a img { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0;} #mal_cs_powered a img:hover { background-color: #403C5A;} #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative;} #searchBox { box-sizing: border-box; -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px;} #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;} #searchListButton { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px !important; top: 14px !important; width: 0;} #mal_cs_listinfo { background-image: url("http://img845.imageshack.us/img845/8608/ptkp.png"); right: 106px;} #mal_cs_listinfo:hover { background-image: url("http://img824.imageshack.us/img824/3051/d79l.png");} #mal_cs_links { background-image: url("http://img35.imageshack.us/img35/5873/bog7.png"); right: 72px !important; z-index: 9;} #mal_cs_links:hover { background-image: url("http://img818.imageshack.us/img818/9403/egyb.png");} #mal_cs_otherlinks { background-image: url("http://img541.imageshack.us/img541/656/x27r.png"); right: 38px !important; z-index: 8;} #mal_cs_otherlinks:hover { background-image: url("http://img34.imageshack.us/img34/7704/unqj.png");} #mal_cs_powered { background-image: url("http://img163.imageshack.us/img163/3715/9y12.png"); right: 4px !important; z-index: 7; position: fixed !important;} #mal_cs_powered:hover { background-image: url("http://img690.imageshack.us/img690/5742/nqz2.png");} #mal_control_strip { background: transparent !important;} #mal_cs_pic img { display: none;} #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important;} .table_header { padding: 6px !important;} /* Animetitle's box width */ td:nth-of-type(2) { width: 200px;} /* Which 'status' up top is selected? */ #list_surround table:first-of-type { font-weight: normal !important; background-color: #0f0f0f !important; font-family: Corbel !important; text-transform: uppercase !important; height: 26px;} .status_selected a { color: #343434 !important; text-decoration: line-through !important; } .status_selected a:hover { color: darkslateblue !important;} .status_not_selected a { color: #343434 !important;} .status_not_selected a:hover { color: darkslateblue !important;} #list_surround table:first-of-type td:nth-of-type(1), #list_surround table:first-of-type td:nth-of-type(2), #list_surround table:first-of-type td:nth-of-type(3), #list_surround table:first-of-type td:nth-of-type(4), #list_surround table:first-of-type td:nth-of-type(5), #list_surround table:first-of-type td:nth-of-type(6) { text-align: left !important;} #list_surround table:first-of-type td:nth-of-type(1) { width: 112px; padding-left: 36px; padding-right: 18px;} #list_surround table:first-of-type td:nth-of-type(2) { width: 61px; padding-left: 18px; padding-right: 18px;} #list_surround table:first-of-type td:nth-of-type(3) { width: 50px; padding-left: 17px; padding-right: 17px;} #list_surround table:first-of-type td:nth-of-type(4) { width: 47px; padding-left: 18px; padding-right: 18px;} #list_surround table:first-of-type td:nth-of-type(5) { width: 87px; padding-left: 17px; padding-right: 17px;} #list_surround table:first-of-type td:nth-of-type(6) { width: 57px; padding-left: 16px; padding-right: 34px;} I copied the whole code, but it looks like this: http://img707.imageshack.us/img707/8228/3ir5.jpg Uh...maybe it's my laptop? o_o OMG my list only gives problems xD |
Oct 7, 2013 4:33 PM
#1291
BaragakiYoru said: I copied the whole code, but it looks like this: http://img707.imageshack.us/img707/8228/3ir5.jpg Uh...maybe it's my laptop? o_o OMG my list only gives problems xD I've updated the code in my previous post, just copy and paste it again, it should work now! |
Oct 8, 2013 1:52 AM
#1292
kuronekodesu said: I've updated the code in my previous post, just copy and paste it again, it should work now! Thank you so much! Now it works perfectly ^^ |
Oct 12, 2013 1:28 PM
#1293
Hi everyone! Well… I've been working on my anime style and I'm quite happy with the result: My List Style Now, here is my problem: Problem I've no idea how to somewhat fix this. If anyone has any tip to make it less unappealing, I'd be glad to hear (read) it. Thank you in advance. |
Oct 13, 2013 11:14 AM
#1294
Is it possible to add a Column "Year" that will show the year when an anime started airing? |
Oct 15, 2013 6:27 AM
#1295
Hey people, I have just one question, it's abut problem I have on this animelist layout: SeishinAkuma - Searchbox in the right corner, when viewed in Firefox, is always 2px shorter then it should be. Is there a solution, does anyone have an idea how to fix this...? Yes, I used mah old themes, and even theme parts from here to make this one, and the code is kinda messy, but if you could check it would mean a lot :D Thanks in advance :D |
Oct 15, 2013 6:59 AM
#1296
ninety said: Hey people, I have just one question, it's abut problem I have on this animelist layout: SeishinAkuma - Searchbox in the right corner, when viewed in Firefox, is always 2px shorter then it should be. Is there a solution, does anyone have an idea how to fix this...? Yes, I used mah old themes, and even theme parts from here to make this one, and the code is kinda messy, but if you could check it would mean a lot :D Thanks in advance :D It's probably because firefox handles input box paddings differently than other browsers. adding padding:0; to #searchBox should make all browsers do it the same way. You'll need to adjust height and width after that. btw is there something wrong with the file with mal strip code? Or is it just me? DarkDooM2 said: Is it possible to add a Column "Year" that will show the year when an anime started airing? Possible but neither simple nor perfect. You'd have to generate additional files similar to the ones used to add covers. Positioning it will be tricky and you won't be able to sort list by it. I've added something similar to my list and it's causing problems. I don't know of any simpler way. |
More topics from this board
» 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 |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |