New
Jul 4, 2013 2:52 PM
#1051
clone4 said: Okay I got two questions? 1.Whats the code for those airing, not yet aired, etc. subtitles? 2.What's the code to change the width of the progress section? 1. I think .animetitle + small 2. You can control the width of the progress table with these, just keep in mind that when you change the width on one part you might have the adjust the width on other parts that get scrunched- like for the whole list or for the animetitle part. For the progress header .table_header:nth-of-type(5) For the progress boxes td:nth-of-type(5) |
Jul 4, 2013 2:56 PM
#1052
TMC2014 said: I recently used the first pre-made layout for Psycho pass for my anime list but I'm not sure how to get pictures in the purple frame. I tried to figure it out but I don't understand any of this. If somebody could please help me, asap. Thanks! In the post for that code, there were two imports at the top that weren't copied to your own CSS. You need those for covers- see here: http://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Requests/PsychoPassblackandwhite.css |
Jul 5, 2013 9:32 AM
#1053
I have a quick question about a little problem on my anime list. I started my list out with the "futuristic premade list layout", but during this week I have been making small alterations to the layout and adding features like the DVD cover preview. This morning I added the headers from a premade psycho pass layout and changed up the category links to my list. Everything is going fine except for one problem, my "more" link doesn't seem to work. I've been going through the forums on the club and tried deleting codes, but I can't seem to find out where exactly I messed up. I'd definitely appreciate if someone could help me out. |
Jul 5, 2013 4:42 PM
#1054
OkamiMillz said: I have a quick question about a little problem on my anime list. I started my list out with the "futuristic premade list layout", but during this week I have been making small alterations to the layout and adding features like the DVD cover preview. This morning I added the headers from a premade psycho pass layout and changed up the category links to my list. Everything is going fine except for one problem, my "more" link doesn't seem to work. I've been going through the forums on the club and tried deleting codes, but I can't seem to find out where exactly I messed up. I'd definitely appreciate if someone could help me out. When you added DVD covers, you skipped step 2, that import will remove #more button from your list which no one has found a way to keep working with that particular cover setup (while keeping it "easy" at least). http://myanimelist.net/forum/?topicid=563993 |
Jul 6, 2013 4:51 PM
#1055
Alrighty...not sure if this goes in the "Ask Questions" queue...but it seems appropriate at this time. I took this anime list layout (below): ![]() and replaced it with the psycho-pass background below (only background image): ![]() but...I like my anime list to have; Airing, Not Yet Aired; next to the anime title. How do I accomplish this? Do I need to put in a request for a new layout just for these changes? Please Help! |
nitchiJul 6, 2013 4:57 PM
Jul 6, 2013 6:29 PM
#1056
nitchi said: but...I like my anime list to have; Airing, Not Yet Aired; next to the anime title. How do I accomplish this? It was something put in long ago not sure why or by who but I've changed it so it shows for anyone using this layout properly now (check your layout to make sure). If you want you can customize that spot with different colors and settings with this selector. .animetitle + small { color: white !important; } nitchi said: Do I need to put in a request for a new layout just for these changes? Please Help! No, I'd like that topic to be for making new layouts from now on for ppl who don't have the time to make their own. When it comes to making small changes to current layouts or asking questions about them thats what this question topic and the numerous customizing topics are for. |
Jul 7, 2013 6:27 PM
#1057
Hi! I have a question that I thought was fairly simple, but I haven't been able to find a solution by myself. I'm not sure if it has been asked here before or not. So I got a new list theme recently, and I want to show a random image from an array of a couple different ones at the top of the list. Right now there is a quote, which is part of the background-image - my idea is to show a new random quote in that spot when the page loads. I'm not the best with CSS, and from what I've found on Google you need to do some javascript-wizardry, which I'm totally incompetent at... I found this example of it done with javascript, but I don't know how to implement it into my theme: http://www.pmob.co.uk/temp/randombgimage2.htm I hope you can come up with a solution? How do I show a random image over the background on my list? You can see my list and the theme here: http://myanimelist.net/animelist/Bakufreak My theme's CSS: htm\l { background: #0b0b0b url('http://i.imgur.com/httHe4n.png') repeat-y center; } #mal_control_stri\p a { text-decoration: none !important; color: #ccc !important; } #mal_control_stri\p a:hover { color: #fff !important; } #mal_cs_pi\c, #mal_cs_listinf\o, #mal_cs_link\s { border: 0 !important; } body { color: #777; font-size: 14px; font-family: arial; background: url('http://i.imgur.com/WUTp2L8.png') no-repeat top center; } #list_surround { width: 960px; margin: 600px auto 20px auto; padding: 20px; background: #111; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow:0 0 20px rgba(0, 0, 0, 0.7); -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.7); box-shadow:0 0 20px rgba(0, 0, 0, 0.7); } .status_selected, .status_not_selected { font-size: 1.5em; border-bottom: 1px dashed #555; margin: 0; padding: 0 0 25px 0; } .status_selected:hover, .status_not_selected:hover { text-shadow: #aaa 0px 0px 30px; } .status_selected a, .status_not_selected a{ color: #ccc; font-family: arial; font-size: 20px; } a{ color: #ccc; text-decoration: none; } a:hover { color: #fff; } .header_title { padding: 10px; background: #222; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } .category_totals { padding: 20px 10px 10px 10px; text-align: center; background: #222; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; } .header_title { color: #fff; font-size: 1.2em; border-bottom: 1px solid #333; } .td1, .td2, .table_header { padding: 1px 10px; background: #222; border-bottom: 1px solid #222; } .td1:hover, .td2:hover { border-bottom: 1px dashed #555; } .table_header { padding-top: 10px; } #grand_totals{ color: #333; text-align: center; } #copyright{ color: #333; padding-top: 6px; text-align: center; margin: 0 auto; } |
Jul 7, 2013 7:05 PM
#1058
Jul 7, 2013 8:02 PM
#1059
Bakufreak said: I hope you can come up with a solution? How do I show a random image over the background on my list? You don't need all that other stuff for random wallpaper. Use this site or a similar one to host an album of random image URLs then make that album's url your background image url: http://www.random-image.net/?action=rnd You can also use signavatar as I said in this tutorial but they are kinda annoying http://myanimelist.net/forum/?topicid=519341 onyxdaman said: recently started gfxing, just wondering where i can get these anime backgrounds to work with, so i can add like renders, etc on them These are all the image sites I still use, you can click the links to go to one of the better sorts for those two things. The best tags for renders are: render, transparent_background, or vector_trace. The best tags for backgrounds to put renders on is scenery or no_humans. http://myanimelist.net/forum/?topicid=504129 |
Jul 7, 2013 8:12 PM
#1060
Shishio-kun said: You don't need all that other stuff for random wallpaper. Use this site or a similar one to host an album of random image URLs then make that album's url your background image url: http://www.random-image.net/?action=rnd You can also use signavatar as I said in this tutorial but they are kinda annoying http://myanimelist.net/forum/?topicid=519341 Lol, I didn't even think of doing the random selection externally. That is clever, thanks :D |
Jul 12, 2013 4:40 AM
#1061
I did not know where to ask something like this, but I was wondering where I could find a high definition background picture (good enough quality for desktop background), taken from some random page:![]() If somebody knows, please reply, I didn't even know under what to search, coz the picture is custom made... |
Jul 12, 2013 5:13 AM
#1062
Ok well heres the background without render. http://i.imgur.com/brMKb.jpg And you could just search this page for a good render to put on the background. http://tinyurl.com/k34tot3 |
Jul 12, 2013 3:00 PM
#1063
TheHolyPotato said: Ok well heres the background without render. http://i.imgur.com/brMKb.jpg And you could just search this page for a good render to put on the background. http://tinyurl.com/k34tot3 well this was quick, thanks man...(^.^) BTW, now tnx to you, I also found the character, under "vocaloid render": https://www.google.si/search?q=vocaloid+render&safe=off&source=lnms&tbm=isch&sa=X&ei=VX7gUa-PLO_24QTOioDwBA&ved=0CAcQ_AUoAQ&biw=1280&bih=695#facrc=_&imgdii=_&imgrc=bzdPN21FFRpZXM%3A%3BQa1MsEOI0Gyf-M%3Bhttp%253A%252F%252Ffc07.deviantart.net%252Ffs71%252Ff%252F2012%252F067%252Ff%252Ff%252Fia___vocaloid_render_i_by_rikku923-d4s3sk8.png%3Bhttp%253A%252F%252Frikku923.deviantart.com%252Fart%252FIa-Vocaloid-Render-I-289070936%3B834%3B1200 |
MonsterguyJul 12, 2013 3:12 PM
Jul 12, 2013 9:14 PM
#1064
Yeah I derped up :P Not too familiar with the vocaloids or names but it's a good thing you found it :) |
Jul 14, 2013 4:36 AM
#1065
Is it possible to seperate specials and OVA's from my main anime-list? I would like it so, that they are in a list beneath my main list.. |
Jul 15, 2013 3:10 AM
#1066
Nicksen said: Is it possible to seperate specials and OVA's from my main anime-list? I would like it so, that they are in a list beneath my main list.. I know of only one way but its very complicated and would take a lot of busy work on your part. You'll probably have to use a coding program like Firebug to make it easier. Would you still wanna? And maybe someone has a simple way and can offer it too. |
Jul 15, 2013 11:35 AM
#1067
Hey, I'm testing (read: learning) things out right now, to create on my first list after I've gathered some ideas and knowledge (hopefully =). Anyways, I want to have 6 images, without any text as links for every category (Currently watching, Completed...) and then have the categories text popup under the link as you hover over it. I found Darkside of love (Vampire Knight) style by Hahaido which had 5 categories(no "All Anime") and the little category name popup (which sadly only pops up in only 1 location). So I added the 6th category but stumbled upon a problem: all the categories left from the one currently selected don't change the preview text in the little "popup" (which is now always active -__-). I am terribly sorry if there already has been a question about this, but I really don't want to scroll through all the 55 pages, or try to find some keyword to find that (possibly not existing) post and hopefully I didn't write too weird of a text that only I can understand =) edit: Please don't get feel sick if the code has some un-needed lines and/or is messy :S |
Jul 15, 2013 9:17 PM
#1068
candyfox said: So I added the 6th category but stumbled upon a problem: all the categories left from the one currently selected don't change the preview text in the little "popup" (which is now always active -__-). That is my fault... So, add to your CSS: .status_not_selected a[href*="status=1"]:hover:after, .status_selected a[href*="status=1"]:hover:after, .status_not_selected a[href*="status=2"]:hover:after, .status_selected a[href*="status=2"]:hover:after, .status_not_selected a[href*="status=3"]:hover:after, .status_selected a[href*="status=3"]:hover:after, .status_not_selected a[href*="status=4"]:hover:after, .status_selected a[href*="status=4"]:hover:after, .status_not_selected a[href*="status=6"]:hover:after, .status_selected a[href*="status=6"]:hover:after, .status_not_selected a[href*="status=7"]:hover:after, .status_selected a[href*="status=7"]:hover:after { z-index: 1; } |
Jul 16, 2013 7:24 AM
#1069
Thank you very much!![]() As I changed the text preview box from "position: fixed" to "position: relative", to have it under each category as I hover over them, I couldn't find a way to change the category icon movement from up to down instead. Also how do I separately change the category links width and the list width (I'd like to move the links close together [no space], but changing the width in CategoryMenu also changes the list width) ![]() |
candyfoxJul 16, 2013 7:28 AM
Jul 16, 2013 9:39 PM
#1070
candyfox said: Also how do I separately change the category links width and the list width (I'd like to move the links close together [no space], but changing the width in CategoryMenu also changes the list width) Your CategoryMenu should look like: #list_surround table:first-of-type { position: absolute !important; width: 600px !important; top: -54px !important; left: 36px; } #list_surround:first-of-type a:hover { text-shadow: none !important; } .status_not_selected, .status_selected { position: relative !important; display: inline-block !important; width: 100px !important; } .status_not_selected a, .status_selected a { visibility: hidden; position: absolute; display: inline-block; letter-spacing: -12px; } .status_not_selected a:hover:before, .status_selected a:before { box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); -o-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); } .status_not_selected a[href*="status=1"]:before, .status_selected a[href*="status=1"]:before, .status_not_selected a[href*="status=2"]:before, .status_selected a[href*="status=2"]:before, .status_not_selected a[href*="status=3"]:before, .status_selected a[href*="status=3"]:before, .status_not_selected a[href*="status=4"]:before, .status_selected a[href*="status=4"]:before, .status_not_selected a[href*="status=6"]:before, .status_selected a[href*="status=6"]:before, .status_not_selected a[href*="status=7"]:before, .status_selected a[href*="status=7"]:before { visibility: visible; display: block; content: ''; width: 100px; height: 67px; background-repeat: no-repeat; letter-spacing: 0 !important; } .status_not_selected a[href*="status=1"]:after, .status_selected a[href*="status=1"]:after, .status_not_selected a[href*="status=2"]:after, .status_selected a[href*="status=2"]:after, .status_not_selected a[href*="status=3"]:after, .status_selected a[href*="status=3"]:after, .status_not_selected a[href*="status=4"]:after, .status_selected a[href*="status=4"]:after, .status_not_selected a[href*="status=6"]:after, .status_selected a[href*="status=6"]:after, .status_not_selected a[href*="status=7"]:after, .status_selected a[href*="status=7"]:after { pointer-events: none; visibility: visible; position: relative; display: block; left: 0; top: 0; width: 76px; padding: 2px 10px 0 8px; color: #000000; font-size: 18px !important; letter-spacing: 0 !important; white-space: nowrap; background-color: rgba(255, 255, 255, 1); box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); -o-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 1); } /* Currently watching */ .status_not_selected a[href*="status=1"]:before, .status_selected a[href*="status=1"]:before { background-image: url(http://i.imgur.com/p44zloW.png); } .status_not_selected a[href*="status=1"]:hover:after, .status_selected a[href*="status=1"]:after { content: 'Current'; } /* Completed */ .status_not_selected a[href*="status=2"]:before, .status_selected a[href*="status=2"]:before { background-image: url(http://i.imgur.com/J3kyHh3.png); } .status_not_selected a[href*="status=2"]:hover:after, .status_selected a[href*="status=2"]:after { content: 'Completed'; } /* On Hold */ .status_not_selected a[href*="status=3"]:before, .status_selected a[href*="status=3"]:before { background-image: url(http://i.imgur.com/qZqaDjt.png); } .status_not_selected a[href*="status=3"]:hover:after, .status_selected a[href*="status=3"]:after { content: 'On Hold'; } /* Dropped */ .status_not_selected a[href*="status=4"]:before, .status_selected a[href*="status=4"]:before { background-image: url(http://i.imgur.com/xSfyHnM.png); } .status_not_selected a[href*="status=4"]:hover:after, .status_selected a[href*="status=4"]:after { content: 'Dropped'; } /* Planned */ .status_not_selected a[href*="status=6"]:before, .status_selected a[href*="status=6"]:before { background-image: url(http://i.imgur.com/WyfE9uz.png); } .status_not_selected a[href*="status=6"]:hover:after, .status_selected a[href*="status=6"]:after { content: 'Planned'; } /*All */ .status_not_selected a[href*="status=7"]:before, .status_selected a[href*="status=7"]:before { background-image: url(http://i.imgur.com/euxBYHM.png); } .status_not_selected a[href*="status=7"]:hover:after, .status_selected a[href*="status=7"]:after { content: 'All Anime'; } |
Jul 17, 2013 3:28 AM
#1071
Again, thank you very much I really appreciate the help! Hopefully I don't get any crazy(read: I cant handle) ideas for my list as I don't want to make request after request here, even tough they probably are easy to handle for you it still takes some time =) |
Jul 17, 2013 4:05 AM
#1072
Jul 18, 2013 3:54 AM
#1073
Alrightee lovely people, I have a few random questions I desperately need an answer to, and would appreciate it very much if you could answer even one of them for me. First, is it possible to split each row on my list into two rows, and by that I mean score, status, type and rating being in the separate row under the row with anime title. Second, is it possible to separate two rows in the list, leaving 2px of blank space between each two rows instead of borders. And third, where do I upload files I need to import, I don't have public dropbox folder, and looks like opendrive doesn't support direct links for standard users. |
Jul 18, 2013 4:37 AM
#1074
1. So, you want to put all rows except Title to a Title row? Code to move rows from their places: td[class^='td']:nth-of-type(#) { position: absolute !important; left: #px !important; top: #px !important; } # - column number (# -1st, Title - 2nd and etc.) 2. The same selector as above. You may use transparent color borders to get a gap between rows: td[class^='td']:nth-of-type(#) { border-left: solid 2px transparent; } or .td1, .td2 { border-left: solid 2px transparent; } 3. I don't know anything about OpenDrive. But you can use Google Drive instead of Dropbox |
HahaidoJul 18, 2013 4:49 AM
Jul 18, 2013 9:14 AM
#1075
Hello guys,I have a question: how do I put a video in my design? like this http://tinypic.com/view.php?pic=e6ce9j&s=6 I'm going crazy,I'm not good at these things ;__; |
Jul 18, 2013 1:39 PM
#1076
Hahaido said: 1. So, you want to put all rows except Title to a Title row? Code to move rows from their places: td[class^='td']:nth-of-type(#) { position: absolute !important; left: #px !important; top: #px !important; } # - column number (# -1st, Title - 2nd and etc.) 2. The same selector as above. You may use transparent color borders to get a gap between rows: td[class^='td']:nth-of-type(#) { border-left: solid 2px transparent; } or .td1, .td2 { border-left: solid 2px transparent; } 3. I don't know anything about OpenDrive. But you can use Google Drive instead of Dropbox Thank you very much :3 Hey, just one more question if it's not too troublesome for someone to answer: status links on the sidebar don't look right in firefox, and i have no idea why :O Since I work with chrome it would take much time to figure it out so if anyone knows about this or this has happened to you before~ http://myanimelist.net/mangalist/ninety |
Jul 18, 2013 11:43 PM
#1077
Hi~ I was wondering if anyone could help me with my Animelist. I want to move the "Currently watching, Dropped, Completed, etc to the far right (For all Computers and have it aligned set to their resolution without bugging out off the screen, etc. Last time I tried doing changing it. My desktop would fit perfectly (1920x1080 monitor), but when looking @ it on my Laptop (1600x900) It kept going off the screen. One more thing is to make it scroll down with my list (If Possible). Sorry for all the trouble Q.Q. Basically I'm trying to get my side bars like this where the list scrolls down and the Side bars stay put: http://myanimelist.net/animelist/BigBoss0327 It starts at "Left side buttons." Thank you for the help ^^. @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-600px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } |
TyrelJul 18, 2013 11:49 PM
Jul 19, 2013 2:34 AM
#1078
Tyrel said: Hi~ I was wondering if anyone could help me with my Animelist Try this @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:0; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } |
Jul 19, 2013 1:01 PM
#1079
Hahaido said: Tyrel said: Hi~ I was wondering if anyone could help me with my Animelist Try this @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:0; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } It works! However, one slight problem is that the boxes start all the way up to the top (where my bar is) is there anyway to relocate to the same kind of even-point where my Animelist is? |
Jul 21, 2013 12:23 AM
#1080
Tyrel said: It works! However, one slight problem is that the boxes start all the way up to the top (where my bar is) is there anyway to relocate to the same kind of even-point where my Animelist is? Well, that's not hard to me but you should read more tutorials because you're asking basic questions @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:24px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:132px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:240px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:348px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:456px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:564px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } your menu is quite big (and fixed position), so if you move it a bit down then it would go out of a screen if you see it on 1366x768 screen |
Jul 21, 2013 3:09 AM
#1081
Tyrel said: Hahaido said: Tyrel said: It works! However, one slight problem is that the boxes start all the way up to the top (where my bar is) is there anyway to relocate to the same kind of even-point where my Animelist is? Well, that's not hard to me but you should read more tutorials because you're asking basic questions @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:24px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:132px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:240px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:348px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:456px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:564px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } your menu is quite big (and fixed position), so if you move it a bit down then it would go out of a screen if you see it on 1366x768 screen To be honest, I'm not a big fan of Scripting. Haven't been since high school from when I dropped the course related to this stuff. I've done most of the basic stuff with my list just from looking @ other peoples and messing around w/ it. This is what it looks like when I tried to use the updated one you have, but it's still near top. [Black line is where I want it to be] ![]() I'll see if I can get it to work, if not oh well :p. as Hahaido told you: "it's impossible to do what you want, you should have a look at the basics at what you are even able to do on myanimelist with CSS (tutorials are in this club), and than try to do that on your own, or if you still can't figure it out how to do >>what is seemingly possible<<, ask for help also others..." OK now, let's see what would be the closest from what you could get in my opinion: 1) scrollable tablets that would start where you want (but if you have long list they will be visible only at the top of your list or somewhere else if you want them to move more up or down) 2) or smaller tablets in size in >>fixed position<< (if you are satisfied with smaller tablets, than that would be possible) otherwise as you have taken a screen picture from, you can crearly see that only 3 and a half tablets out of 6 would be always visible in >>fixed position<< !!! if you still did not understand what I told you above, let me clarify it to you with basic understanding: 1) scrolling down means that you can move tablets up or down, when you will use the wheel on your mouse to scroll or some other type of command 2) having tablets in one position on your screen, in other words >>fixed position<<, means they are always in one place no matter what you do and if they are too big they will be out of screen, what means that "that part" will be invisible and unfunctional (this is what you wanted in your posts above, and why Hahaido told you to look at the basics...xD) correct me if you want but this is how I understood the conversation the both of you had !!! |
MonsterguyJul 21, 2013 3:13 AM
Jul 21, 2013 4:30 AM
#1082
Monsterguy said: Tyrel said: Hahaido said: Tyrel said: It works! However, one slight problem is that the boxes start all the way up to the top (where my bar is) is there anyway to relocate to the same kind of even-point where my Animelist is? Well, that's not hard to me but you should read more tutorials because you're asking basic questions @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:24px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:132px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:240px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:348px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:456px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:564px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } your menu is quite big (and fixed position), so if you move it a bit down then it would go out of a screen if you see it on 1366x768 screen To be honest, I'm not a big fan of Scripting. Haven't been since high school from when I dropped the course related to this stuff. I've done most of the basic stuff with my list just from looking @ other peoples and messing around w/ it. This is what it looks like when I tried to use the updated one you have, but it's still near top. [Black line is where I want it to be] ![]() I'll see if I can get it to work, if not oh well :p. as Hahaido told you: "it's impossible to do what you want, you should have a look at the basics at what you are even able to do on myanimelist with CSS (tutorials are in this club), and than try to do that on your own, or if you still can't figure it out how to do >>what is seemingly possible<<, ask for help also others..." OK now, let's see what would be the closest from what you could get in my opinion: 1) scrollable tablets that would start where you want (but if you have long list they will be visible only at the top of your list or somewhere else if you want them to move more up or down) 2) or smaller tablets in size in >>fixed position<< (if you are satisfied with smaller tablets, than that would be possible) otherwise as you have taken a screen picture from, you can crearly see that only 3 and a half tablets out of 6 would be always visible in >>fixed position<< !!! if you still did not understand what I told you above, let me clarify it to you with basic understanding: 1) scrolling down means that you can move tablets up or down, when you will use the wheel on your mouse to scroll or some other type of command 2) having tablets in one position on your screen, in other words >>fixed position<<, means they are always in one place no matter what you do and if they are too big they will be out of screen, what means that "that part" will be invisible and unfunctional (this is what you wanted in your posts above, and why Hahaido told you to look at the basics...xD) correct me if you want but this is how I understood the conversation the both of you had !!! Ah, kay. Makes sense. Thanks. |
Jul 21, 2013 5:15 AM
#1083
2Tyrel: maybe this can help: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:239px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:349px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:459px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:569px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:679px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:564px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } btw I like your avatar! Tenshi is so cute!.. |
Jul 21, 2013 10:07 AM
#1084
I started testing with the list again, but ran into problems straight away as I wanted to add custom list headers. Created a quick header, took the codes from here, but the header wont show =/ Don't really know where to search the problem from (aside from basics, for non-coders anyways) |
Jul 21, 2013 10:35 AM
#1085
I would like to thank you for answering my question before even posting it :D. (My issue was the override user list style setting) Going to make my first CSS style and it messed with my mind seeing everyones style looked almost like mine now so I checked on another browser and hey everything was different and so I looked up what's the problem. Thanks again. |
Jul 21, 2013 9:16 PM
#1086
You're trying to apply a background to a header but you already have a background, so pictures (2nd background) won't show @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://dl.dropboxusercontent.com/s/hnlgk9nst9862hq/CategoryMenu.css"; @import "http://dl.dropboxusercontent.com/s/35bfnuxgbgzjeds/Headers.css"; /* COVER AREA*/ :hover + .hide { background-size: cover; left: 780px; top: 450px; height: 318px; width: 225px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(0, 0, 0, 0.7); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } /* PREVIEW MSG ABOVE COVERS*/ .hide:before { background: transparent; content: ""; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /*WALLPAPER*/ body { background-attachment: fixed !important; background-image: url(http://i.imgur.com/o44nvks.jpg) !important; background-size: cover !important; } /*LIST SIZE &amp;amp;amp;amp; POSITION*/ #list_surround { width: 750px !important; position: absolute !important; left: 10px !important; top: 250px !important; } /*CATEGORIES*/ .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background-color: rgba(0, 0, 0, 0.8) !important; border-radius: 10px 10px 0px 0px; } /*THE LIST*/ .td1, .td2 { background: rgba(0, 0, 0, 0.7) !important; } /*HEADERS*/ .table_header, .category_totals, #grand_totals, #copyright { background: rgba(0, 0, 0, 0.7) !important; } /*HOVER OVER*/ tr:hover [class^=td] { background-color: rgba(211, 17, 17, 0.9) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } /*LINKS &amp;amp;amp;amp; OTHER TEXT*/ a, a:visited, body { font-family: Agency FB; color: white !important; } |
Jul 22, 2013 8:57 AM
#1087
Thank you once again for the help! With my tired head I just copy-pasted the code without any backup so I couldn't look what changes you made ![]() Now I will slowly inch forward in trying to create my list design =) |
Jul 22, 2013 9:29 PM
#1088
candyfox said: With my tired head I just copy-pasted the code without any backup so I couldn't look what changes you made So, you imported headers code (@import "http://dl.dropboxusercontent.com/s/35bfnuxgbgzjeds/Headers.css";) with background pictures. But below you code /*CATEGORIES*/ .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background: rgba(0, 0, 0, 0.8) !important; border-radius: 10px 10px 0px 0px; } thus you switched the backgrounds to rgba(0, 0, 0, 0.8) If you're using only color for background then code background-color instead of background |
Jul 22, 2013 9:32 PM
#1089
Jul 22, 2013 9:54 PM
#1090
Really nice list! For your understanding I marked changes with red: @import"https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSLeftFixed.css"; /* // Self-explanatory */ BODY { background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccsLSAL.png), url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/Untitled-1.png); background-attachment: fixed; background-repeat: no-repeat, repeat; background-position: left bottom, right top; color: #ffffff; font-size: 10.00px; font-family: Verdana, Arial; background-color: #ffffff; } /* // Determines the positioning of your list */ #list_surround { position: absolute !important; right: 40px !important; width: 600px; } /* // Determines the positioning of my header */ div#list_surround { margin: 0 auto; padding-top: ; width: 600px; background: url() no-repeat; } /* // All links on your list */ a { color: #ffffff; text-decoration: none; } a:visited { color: #e9c3c4; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } /* // Alternating row color 1 */ .td1 { color: #ffffff; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #ea555a; padding: 2px; background-color: #ea555a; } /* // Alternating row color 2 */ .td2 { color: #ffffff; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #ea555a; padding: 2px; background-color: #ea555a; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: #ffffff; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #ea555a; background-color: #ea555a; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: #f7d9ed } .table_headerLink:Visited { color: #e9c3c4; } .table_headerLink:Hover { color: #000; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: dashed; color: #transparent; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* CUSTOM CATEGORY LINKS These codes control the 6 links to your list categories. See this page for further info on altering the background or moving the links: http://myanimelist.net/forum/?topicid=416069 Also whenever you customize one of the link codes, it can apply some of its changes to all the other parts after it, so you will need to customize those proceeding parts on their own (except for LEFT OVER BOXES). */ /* CURRENTLY WATCHING/READING LINK */ .status_selected a, .status_not_selected a { color: transparent; letter-spacing: -12px; background: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccslsCWCnsaa.png) no-repeat scroll 0 0 transparent !important; padding-right: 148px; padding-top: 50px; padding-bottom: 0px; position: fixed; margin:; margin-top: 0px; left: 490px; right:; top: 105px; bottom: ; } /* COMPLETED LINK */ .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccslsCWCc.png) no-repeat scroll 0 0 transparent !important; padding-right: 148px; padding-top: 50px; padding-bottom: 0px; position: fixed; margin-top: 0px; margin:; left: ; right: ; top: 160px; bottom: ; } /* ON HOLD LINK */ .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccslsCWCohaa.png) no-repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: fixed; margin:; margin-top: 0px; left: ; right:; top: 215px; bottom: ; } /* DROPPED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccslsCWCd.png) no-repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: fixed; margin:; margin-top: 0px; left: ; right:; top: 270px; bottom: ; } /* PLANNED LINK */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccslsCWCptw.png) no-repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: fixed; margin:; margin-top: 0px; left: ; right:; top: 325px; bottom: ; } /* ALL ANIME/MANGA LINK */ .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{ background: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ccslsCWCaa.png) no-repeat scroll 0 0 transparent !important; padding-right: ; padding-top: ; padding-bottom: ; position: fixed; margin:; margin-top: 0px; left: ; right:; top: 380px; bottom: ; } /* LEFT OVER BOXES These are boxes which pad the links that may get left over after customizing your links (depending on the type of list). These codes will remove them from view and don't need to be customized the same as the other links above. */ .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0 0 transparent; border: none; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_title { display: none; } .header_cw {height: 215px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ALCCS_cw.png); background-repeat: no-repeat; } .header_completed {height: 215px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ALCCS_c.png); background-repeat: no-repeat; } .header_onhold {height: 215px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ALCCS_oh.png); background-repeat: no-repeat; } .header_dropped {height: 215px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ALCCS_d.png); background-repeat: no-repeat; } .header_ptw {height: 215px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/ALCCS_ptw.png); background-repeat: no-repeat; } .header_title { font-size: 14px; font-weight: bold; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } .category_totals { color: #ffffff; border-top:0px solid #f7d9ed; background-color: #transparent; height: 20px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/bottom1.png); background-repeat: no-repeat; text-align:center; } #grand_totals { text-align: center; height: 34px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/cat.png); } /* copyright contains the &quot;Producted by Garrett Gyssler&quot; text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 600px; background-image: url(http://i510.photobucket.com/albums/s344/nadas_lj/CCSLSMAL/cat.png); } |
Jul 23, 2013 1:14 AM
#1092
Hahaido said: 2Tyrel: maybe this can help: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:0; padding:0; position:fixed; top:239px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:349px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:459px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:569px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:679px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:564px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } btw I like your avatar! Tenshi is so cute!.. Thank you! That works perfectly. I'ma save it down to use when I resize these images. I noticed what you mentioned earlier about them being cut off on certain screens :S. But yeah, thank you :). One thing I noticed though when I did change it, is that the "Drop menu is underneath "All anime." Maybe I'll just take that drop menu out - Fixed it. One value wasn't change in the menus. Again thank you :D. Tenshi ftw<3. |
TyrelJul 23, 2013 1:25 AM
Jul 23, 2013 2:21 AM
#1093
Tyrel said: Thank you! That works perfectly. I'ma save it down to use when I resize these images. You don't need to resize the images: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background-image:url(http://i.imgur.com/VygiI.png); display:block; background-size:100%; height:80px; right:0; padding:0; position:fixed; top:239px; width:216px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/EypFX.png); top:329px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/XfIAq.png); top:419px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/Djnon.png); top:509px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/y93VK.png); display:inline; top:599px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; top:689px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } |
HahaidoJul 23, 2013 2:32 AM
Jul 23, 2013 5:11 PM
#1094
Do you have a code for rounding the corners of the list without rounding the header since I'm using image for it? |
Jul 23, 2013 6:32 PM
#1095
First of all hi, I'm new to the club and have a question. Hopefully its not answered somewhere else and i just didn't see it. I was looking around mal today to find out how to edit my anime/manga lists and stumbled upon a thread from this club. The saints that you are provided the option to use some excellent and already made designs. I just wanted to make sure it was OK if i use them for a bit until i can make my own.(I am aware that it was stated that others could use them but I'd prefer to double check) I left them as is so the credit info is there. Thanks.(sorry if this is in the wrong place) |
If strength is justice, then is powerlessness a crime? |
Jul 23, 2013 9:19 PM
#1096
2Fallenkingzero: you can use any layout featured in the following topic: http://myanimelist.net/forum/?topicid=318587 Siesta said: Do you have a code for rounding the corners of the list without rounding the header since I'm using image for it? Try .table_header:first-child { border-top-left-radius: 8px; } .table_header:last-child { border-top-right-radius: 8px; } .category_totals { border-radius: 0 0 8px 8px; } |
HahaidoJul 23, 2013 9:42 PM
Jul 23, 2013 9:48 PM
#1097
Thanks, both are from the right place. |
If strength is justice, then is powerlessness a crime? |
Jul 24, 2013 1:52 AM
#1098
Hahaido said: Tyrel said: Thank you! That works perfectly. I'ma save it down to use when I resize these images. You don't need to resize the images: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background-image:url(http://i.imgur.com/VygiI.png); display:block; background-size:100%; height:80px; right:0; padding:0; position:fixed; top:239px; width:216px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/EypFX.png); top:329px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/XfIAq.png); top:419px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/Djnon.png); top:509px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/y93VK.png); display:inline; top:599px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; top:689px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } I hate asking so many questions. ;_;. But is that so? I've tried throwing the css on my desktop and it worked fine (Except for the "Plan to watch" thing was duplicated and all anime disappeared, but on my Laptops monitor [Resolution at 1600x900] the last remaining box always gets caught off. Does that mean people with lower res monitors won't be able to see them? That's the main concern I have. Which is why I wanted to make them smaller (Since it's easier for me to do other then just redoing the code) |
Jul 24, 2013 2:18 AM
#1099
Tyrel said: it's easier for me to do other then just redoing the code) There is no difference between coding and resizing, except coding is much faster to do. You just need to understand the code. You set the width and height of buttons and the following code line: background-size: 100%; automatically resizes the images to the size you had set |
Jul 24, 2013 4:48 AM
#1100
Hahaido said: 2Fallenkingzero: you can use any layout featured in the following topic: http://myanimelist.net/forum/?topicid=318587 Siesta said: Do you have a code for rounding the corners of the list without rounding the header since I'm using image for it? Try .table_header:first-child { border-top-left-radius: 8px; } .table_header:last-child { border-top-right-radius: 8px; } .category_totals { border-radius: 0 0 8px 8px; } Thank you it's really working perfectly. :3 |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |