New
May 12, 2012 11:06 AM
#201
Allenwalker1 said: Hello I was wondering if someone could help me I've seen loads of amazing animelist and was wondering if there are any pre-made layouts where the header with image covers (currently watching,on-hold,dropped, etc). If not how do I know what sizes I require. example http://www.freeimagehosting.net/t2l4h I don't really see what you mean, I guess you mean a layout where all the headers are the same image? I don't think any premade ones do that. |
May 12, 2012 11:32 PM
#202
Shishio-kun said: Aaralyn said: Hi guys. I just got a problem Q,Q I wanted to change style of main logo in my animelist. Thing is, it kinda covers the list itself.. What should I change in the code to make it work properly? You needed to make some margin-top adjustments in a couple parts to fit that bigger image. I did it for you tho no problem, this is the adjusted CSS: * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } a:hover { text-decoration:underline; } body { background:url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom #181818; } #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #292929; border-left:1px solid #292929; border-right:1px solid #292929; height:100%; left:141px; margin:339px auto 100px; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled1-1.png) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; } #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 { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled1-1.png) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #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://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled6.png) repeat scroll 0 0 white; top:140px; } #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://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled3.png) repeat scroll 0 0 transparent; top:280px; } #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://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled5.png) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled4.png) repeat scroll 0 0 transparent; display:inline; top:560px; } #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://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled2-1.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; } #list_surround br { display:none; } #list_surround .header_title { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/Untitled2-3.png) no-repeat scroll 0 0 transparent; height:320px; left:-283px; padding:25px; position:absolute; top:-330px; width:819px; } #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 { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .header_cw { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/watching.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/compl.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/onhold.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/plans.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i888.photobucket.com/albums/ac87/LaDraqKumeia/dropp.png) no-repeat scroll 0 0 transparent; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #copyright { background:url(http://i34.tinypic.com/e1vup.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Love you, thanks ! |
May 28, 2012 2:37 AM
#203
Hi everyone, uhm I have a general question since I'll be working on my anime and manga list in the upcoming days.. importing the CSS is the best way to get most of it working, right? Are there any tutorials for dropbox? And, is it still possible to "hide" (I think encrypt is the right term) the imported CSS? (like: @import url(\68 \74 \74 \70 \3a \2f \2f \74 \72 \69 \63 \ etc.) If yes, how? I did that years ago with some funny ascii art on top of my list style code, but the websites I used that helped me I've already forgotten long ago.. :S Hopefully someone can help me, and thanks already! |
May 28, 2012 2:47 AM
#204
http://easycalculation.com/ascii-hex.php Enter a string (the dropbox address), copy/paste the numbers given after "Equivalent Hex Value" and add a backslash before each of them |
u531355May 28, 2012 2:52 AM
May 28, 2012 2:51 AM
#205
You're amazing, thanks a lot! ^_^ (and I found the dropbox tutorial already :3 ) |
May 28, 2012 5:04 AM
#206
@ FUN Note that any person using web-dev tools like Firebug will be able to see pure link so it is less likely to protect from anyone willing to steal your layout |
![]() |
May 29, 2012 3:17 AM
#207
Does anyone know how I change the Currently Watching link to just say Currrent? |
May 29, 2012 4:08 AM
#208
a[href*="status=1"] { |
May 30, 2012 2:59 AM
#209
u531355 said: <pre>a[href*="status=1"] { Yes it works! That helps me a lot. Do you know how what the selector of the hover is? I'd like to change the image on hover but keep the content to "Watching". |
May 30, 2012 1:31 PM
#210
Shishio-kun said: Do you know how what the selector of the hover is? I'd like to change the image on hover but keep the content to "Watching". Ah nm, I got it. For something like a:before to get the hover you need to a:hover:before not a:before:hover. |
May 31, 2012 1:55 AM
#211
u531355 said: <pre>a[href*="status=1"] { I notice this takes away my table header links as well. I can't use it this way, is there any way to get my table header links back and still use these selectors? |
May 31, 2012 4:59 AM
#212
@ Shishio-kun Have you tried adding a [class^="status"] before each selector? |
![]() |
May 31, 2012 7:45 PM
#213
VeriTi said: @ Shishio-kun Have you tried adding a [class^="status"] before each selector? It worked! Thanks, you've saved my ass again man! |
Jun 1, 2012 8:46 AM
#214
Hello!) I'm in this business (in design) are new and I need your help ... And how to make an inscription on top was transparent? Here's a screenshot (I need, where it is noted in red): ![]() I would like to get as transparent here: ![]() Here's my list: http://myanimelist.net/mangalist/_YukariSekai_ Code: body { background-image: url(http://img706.imageshack.us/img706/1570/10899198.jpg); background-attachment: fixed; } .header_title { background-color:light; color:#FFCCFF; font-family:english100 vivace bt; font-size:25px; } .table_header { background-color:#000000; } .animetitle, .animetitle:visited { color:#CCCCFF; font-family:Cambria; font-size:15px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } #list_surround { width:650px; } #list_surround { left: 5px; position: absolute;} body{ background-position: left top;} body { font-weight: light; background-repeat: no-repeat; background-color: #FBFDE8; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img20.imageshack.us/img20/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:42px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } |
I do not love shounen-ai and yaoi there, where it is not present. |
Jun 1, 2012 10:02 AM
#215
This code is to regulate opacity level: filter: alpha(opacity=90); /*change the value to make background more or less transparent */ -moz-opacity: 0.9; /*change the value to make background more or less transparent */ opacity: 0.9; /*change the value to make background more or less transparent */ Paste it into .table_header selector to make MangaTitle, Chapters, Volumes etc background transparent. And into .status_selected, .status_not_selected for Currently Reading, Completed, On Hold etc |
Jun 1, 2012 11:36 AM
#216
Hahaido Thank you.=)) |
I do not love shounen-ai and yaoi there, where it is not present. |
Jun 1, 2012 5:48 PM
#217
Something I do not understand ... I am doing as it is written, but I completely removed the transparency ... Can anyone give me the code ready? .. Well, if you will of course not difficult to do, thanks.) Here's the code: /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://img706.imageshack.us/img706/1570/10899198.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:light; color:#FFCCFF; font-family:english100 vivace bt; font-size:25px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:#000000; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:#CCCCFF; font-family:Cambria; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:650px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { left: 5px; position: absolute;} /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' with other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center". If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: left top;} /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FBFDE8; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img20.imageshack.us/img20/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:42px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } |
I do not love shounen-ai and yaoi there, where it is not present. |
Jun 1, 2012 10:54 PM
#218
@ _YukariSekai_ Like this? /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://img706.imageshack.us/img706/1570/10899198.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:light; color:#FFCCFF; font-family:english100 vivace bt; font-size:25px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-image: url("http://img20.imageshack.us/img20/228/frame6518.png"); } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:#CCCCFF; font-family:Cambria; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:650px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { left: 5px; position: absolute;} /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' with other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center". If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: left top;} /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FBFDE8; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img20.imageshack.us/img20/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } .status_selected { background-image: url("http://img20.imageshack.us/img20/228/frame6518.png"); padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-image: url("http://img20.imageshack.us/img20/228/frame6518.png"); padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:42px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } Parts in bold is what I've changed |
![]() |
Jun 2, 2012 7:21 AM
#219
I would like to put a frame (at the place of the green frame). Someone can help me please. By the way how to get the # list_surround below the #mal_cs_listinfo and the other. http://www.noelshack.com/2012-22-1338646684-Sanstitrea1.png http://www.noelshack.com/2012-22-1338646691-sSanstitre1.png Here is my animelist: http://myanimelist.net/animelist/DaxHim |
DaxHimJun 2, 2012 7:30 AM
I speak the google translate English so please excuse me. |
Jun 2, 2012 11:28 AM
#220
VeriTi Thank you very much.=)) |
I do not love shounen-ai and yaoi there, where it is not present. |
Jun 12, 2012 10:14 AM
#221
I don't mean to beat a dead horse here but I'm having trouble understanding the BBcoding for profile graphics. I got a good idea on what I want to make but I don't know how to make separate links for each button I'm making. In short, I don't know how to make one link go to lets say my favorite Anime's list and have another link go to my favorite Manga's list on one graphic. If anyone can help understand this better, it would mean a lot. |
Jun 12, 2012 10:47 AM
#222
Nara-Sama said: I don't mean to beat a dead horse here but I'm having trouble understanding the BBcoding for profile graphics. I got a good idea on what I want to make but I don't know how to make separate links for each button I'm making. In short, I don't know how to make one link go to lets say my favorite Anime's list and have another link go to my favorite Manga's list on one graphic. If anyone can help understand this better, it would mean a lot. http://myanimelist.net/forum/?topicid=200323&show=80#msg12506735 Does this help? I answered someone with a similar question here. |
Jun 13, 2012 1:31 AM
#223
Shishio-kun said: Nara-Sama said: I don't mean to beat a dead horse here but I'm having trouble understanding the BBcoding for profile graphics. I got a good idea on what I want to make but I don't know how to make separate links for each button I'm making. In short, I don't know how to make one link go to lets say my favorite Anime's list and have another link go to my favorite Manga's list on one graphic. If anyone can help understand this better, it would mean a lot. http://myanimelist.net/forum/?topicid=200323&show=80#msg12506735 Does this help? I answered someone with a similar question here. Yes, this pretty answers my question on how to do it now. Thank you Shishio-kun for the help. |
Jun 13, 2012 2:25 AM
#224
How to move a list table up like that - http://s1.hostingkartinok.com/uploads/images/2012/06/97ea1a0361512267c410da95162e651a.png ?<pre> |
Jun 13, 2012 8:00 AM
#225
What do you want to move up? The links to sort your list in different orders? (.table_header) |
Jun 16, 2012 12:02 AM
#226
Recently, I had loads of dead links in my anime list, and I've recently gone about fixing them (and the background too), but the fix provided has made the background a slightly bluish-translucent colour which I'm not a big fan of. I tried the list with a transparent background, but it made the list too hard to read, so I was wondering if it was possible to get some help to have this changed to maybe a green/brown translucent background instead? Thanks for any help. (Just in case you need my code for some reason.) /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! For more help see here: http://myanimelist.net/clubs.php?cid=19736 */ body { background-image: url(http://i45.tinypic.com/10s67uc.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). Change the color of the background by changing the color below after "background-color" (red, for example). Change the color of the fonts here by changing "color:" to another color (purple, for example). Change the font style here after "font-family:" to change these fonts to another style (Times New Roman, for example). Change the size of the fonts here by increasing or decreasing the number after "font-size:" (16px, for example). */ .header_title { background-color:#7B3F00; color:white; font-family:impact; font-size:24px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. You can change the color of the background by changing the color below after "background-color" (red, for example). */ .table_header { background-color:#E5AA70; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. Change the color by "color:" to another color to change the fonts here (purple, for example). Change the font style after "font-family:" to change these fonts to another style (Times New Roman, for example). Change the size of the fonts here by increasing or decreasing the number after "font-size:" (16px, for example). */ .animetitle, .animetitle:visited { color:white; font-family:aharoni; font-size:14px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! Change the color of the fonts here by changing "color:" to another color (purple, for example). Change the font style here after "font-family:" to change these fonts to another style (Times New Roman, for example). */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! Increase the width of your layout here, to a higher or lower amount. */ #list_surround { width:700px; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these. If you want to customize more on the page, come to my group and ask or move on to a more advanced layout. */ body { font-weight: light; background-position: top center; background-repeat: no-repeat; background-color: black; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i50.tinypic.com/opxow9.jpg); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } #list_surround { position:absolute; left:1px;} .header_title { height:30px; } /*FIX MISSING LIST BACKGROUND PATCH For the Hatsune Miku, Shojo, Hellsing, Scan-style, Ecchi beginners layouts only. */ .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img18.imageshack.us/img18/816/closest7.png); } category_totals, .td1, .td2, #grand_totals, #copyright {background-image: url(none); background-color:transparent;} |
![]() |
Jun 16, 2012 12:23 AM
#227
2Jack_Rav Code: /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! For more help see here: http://myanimelist.net/clubs.php?cid=19736 */ body { background-image: url(http://i45.tinypic.com/10s67uc.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). Change the color of the background by changing the color below after "background-color" (red, for example). Change the color of the fonts here by changing "color:" to another color (purple, for example). Change the font style here after "font-family:" to change these fonts to another style (Times New Roman, for example). Change the size of the fonts here by increasing or decreasing the number after "font-size:" (16px, for example). */ .header_title { background-color:#7B3F00; color:white; font-family:impact; font-size:24px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. You can change the color of the background by changing the color below after "background-color" (red, for example). */ .table_header { background-color:#E5AA70; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. Change the color by "color:" to another color to change the fonts here (purple, for example). Change the font style after "font-family:" to change these fonts to another style (Times New Roman, for example). Change the size of the fonts here by increasing or decreasing the number after "font-size:" (16px, for example). */ .animetitle, .animetitle:visited { color:white; font-family:aharoni; font-size:14px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! Change the color of the fonts here by changing "color:" to another color (purple, for example). Change the font style here after "font-family:" to change these fonts to another style (Times New Roman, for example). */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! Increase the width of your layout here, to a higher or lower amount. */ #list_surround { width:700px; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these. If you want to customize more on the page, come to my group and ask or move on to a more advanced layout. */ body { font-weight: light; background-position: top center; background-repeat: no-repeat; background-color: black; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(255, 204, 153, .9); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } #list_surround { position:absolute; left:1px;} .header_title { height:30px; } Preview: ![]() |
HahaidoJun 16, 2012 12:29 AM
Jun 16, 2012 12:49 AM
#228
Thanks for the quick response, and effective fix. :) |
![]() |
Jun 22, 2012 11:03 PM
#229
I have no idea what I did but my currently watching, completed etc... links are gone (they should be on the rectangle that the yellow arrows are pointing at). Edit: The problem is fixed Screenshot: ![]() Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; BODY { background-attachment: scroll; background-color: #1A202C; background-image: url("http://i155.photobucket.com/albums/s308/princesspinkykat/color2.jpg"); background-position: center center; background-repeat: repeat-y; color: #7E7E7E; font-size: 13px; } #list_surround { background-image: url("http://i155.photobucket.com/albums/s308/princesspinkykat/bannercopy.jpg"); background-position: center top; background-repeat: no-repeat; margin: 15px auto 0; padding-top: 285px; width: 670px; } a { color: black; text-decoration: none; } a:visited { color: #0E2D45; text-decoration: none; } a:hover { color: #2F8BD5; text-decoration: none; } .td1 { background-color: #DEDBA7; border-color: #2F8BD5; border-style: none; border-width: 1px; color: black; font-variant: small-caps; letter-spacing: 1px; padding: 2px; } .td2 { background-color: #999966; border-color: #2F8BD5; border-style: none; border-width: 1px; color: white; font-variant: small-caps; letter-spacing: 1px; padding: 2px; } .table_header { background-color: #BC5C53; border-color: #D13F31; border-style: none; border-width: 1px; padding: 2px; } .table_headerLink { } .table_headerLink:visited { } .table_headerLink:hover { } .form { background-image: url(""); border-style: none; border-width: 1px; font-size: 12px; padding: 2px; } .status_selected { border-color: #4E6D86; border-style: none; border-width: 2px 3px 3px 2px; color: #000000; font-size: 10px; letter-spacing: 2px; padding: 2px; } .status_not_selected { border-color: #4E6D86; border-style: none; border-width: 2px 3px 3px 2px; color: #000000; font-size: 10px; letter-spacing: 2px; padding: 2px; } .header_cw { background-image: url(""); } .header_completed { background-image: url(""); } .header_onhold { background-image: url(""); } .header_dropped { background-image: url(""); } .header_ptw { background-image: url(""); } .header_title { color: #FFFFFF; font-size: 25px; font-variant: small-caps; font-weight: bold; letter-spacing: 5px; text-align: center; } .category_totals { background-image: url(""); color: white; text-align: center; width: 570px; } #grand_totals { color: #FFFFFF; font-variant: small-caps; letter-spacing: 3px; text-align: center; } .header_al { font-size: 12px; font-weight: bold; } .header_al_links { color: #FFFFCC; font-variant: small-caps; letter-spacing: 3px; } .animetitle { color: #21537B; width: 570px; } #copyright { background-color: #FFFFFF; margin: auto; padding-top: 2px; text-align: right; width: 500px; } |
alwayswhimsicalJun 22, 2012 11:50 PM
Jun 22, 2012 11:18 PM
#230
Jun 22, 2012 11:49 PM
#231
Hahaido said: 2alwayswhimsical Point your cursor at the Menu title at the top right. You will see the list with the links. You should to use the previous version of top bar menu without Menu button to keep the links on their positions It worked! Thank you so much for the quick reply. |
Jun 23, 2012 1:03 PM
#232
Teffycom said: How to move a list table up like that - http://s1.hostingkartinok.com/uploads/images/2012/06/97ea1a0361512267c410da95162e651a.png ? <pre><pre> Well Teffy never replied back to u5 on exactly what hes trying to move up but what in case anyones wondering or he is lurking an easy to way to move the entire list up usually is: #list_surround { top: -23px; position: absolute; } I cover repositioning list here: http://myanimelist.net/forum/?topicid=393437&show=0#post1 |
Jun 28, 2012 6:09 PM
#233
How do you make a border around text in a picture? like this: http://i21.photobucket.com/albums/b298/LudvigP/watching2.png |
|
Jul 5, 2012 10:08 PM
#234
RikaFurude said: How do you make a border around text in a picture? like this: http://i21.photobucket.com/albums/b298/LudvigP/watching2.png If you want to make a picture with text and put border around the text, you need a Image Editor(like Photoshop, GIMP, etc.) and in the layer options(Blending Options in Photoshop, I don't remember how it's called in GIMP) there are one option called Outline, and this is what you want... But there is a way to do this in pure CSS, with text-shadow in 4 directions with 1 pixel out of phase in each direction, but this only make a 1px border. |
Jul 27, 2012 2:42 PM
#235
could someone help me with my list layouts? for some reason no one can see the background pictures. this is the code that i'm using for my anime list. @import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css"; @import "http://dl.dropbox.com/u/78340470/animetitle.css"; /* This is the MATH part of the layout. Don't touch it unless you know what you're doing */ @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css); /* Remove the following line if you don't want to use my top bar redux */ @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); body{ /* Set up a background image: */ background-image: url(http://konachan.com/sample/845517c7da797a881195906cc4b84a95/Konachan.com%20-%20128409%20sample.jpg); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /* This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* Background color for hovered row in 'the rest' section * I made it more opaque and a bit gray * You may remove the following 3 lines if you don't want this effect. */ tr:hover [class^='td']{ background-color: rgba(45,45,45,0.9) !important; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png); } /* Block displaying category totals * It's redesigned to be the part of the layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png'); } /* upd 11th March 2012 */ /* ROWS TRANSITION This controls the part where pics appear on your rows. It controls the timing. You can change the numbers. The first number in each row by default is .5s, this is a half second. It controls how fast the pic window "opens". The second number is the time it takes the window to begin opening. By default its set to .1s, a tenth of a second. If you changed it to 2s, it would take two seconds for the window to open. You'll need to change all the rows timings! They change different browser's timings. */ .td1, .td2 { transition: line-height .5s ease .1s; -o-transition: line-height .5s ease .1s; -moz-transition: line-height .5s ease .1s; -webkit-transition: line-height .5s ease .1s; } .td1, .td2 { line-height: 35px; } /* LIST ROWS HEIGHT ON HOVER This is the height of the rows when you put your cursor on them. */ tr:hover .td1, tr:hover .td2 { line-height: 340px; } /* AIRING */ .animetitle + small { position: relative; line-height: 1px !important; } td:nth-of-type(6) { line-height: 20px !important; } |
![]() |
Jul 27, 2012 2:49 PM
#236
Angel_Beats said: could someone help me with my list layouts? for some reason no one can see the background pictures. this is the code that i'm using for my anime list. @import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css"; @import "http://dl.dropbox.com/u/78340470/animetitle.css"; /* This is the MATH part of the layout. Don't touch it unless you know what you're doing */ @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css); /* Remove the following line if you don't want to use my top bar redux */ @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); body{ /* Set up a background image: */ background-image: url(http://konachan.com/sample/845517c7da797a881195906cc4b84a95/Konachan.com%20-%20128409%20sample.jpg); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /* This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* Background color for hovered row in 'the rest' section * I made it more opaque and a bit gray * You may remove the following 3 lines if you don't want this effect. */ tr:hover [class^='td']{ background-color: rgba(45,45,45,0.9) !important; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png); } /* Block displaying category totals * It's redesigned to be the part of the layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png'); } /* upd 11th March 2012 */ /* ROWS TRANSITION This controls the part where pics appear on your rows. It controls the timing. You can change the numbers. The first number in each row by default is .5s, this is a half second. It controls how fast the pic window "opens". The second number is the time it takes the window to begin opening. By default its set to .1s, a tenth of a second. If you changed it to 2s, it would take two seconds for the window to open. You'll need to change all the rows timings! They change different browser's timings. */ .td1, .td2 { transition: line-height .5s ease .1s; -o-transition: line-height .5s ease .1s; -moz-transition: line-height .5s ease .1s; -webkit-transition: line-height .5s ease .1s; } .td1, .td2 { line-height: 35px; } /* LIST ROWS HEIGHT ON HOVER This is the height of the rows when you put your cursor on them. */ tr:hover .td1, tr:hover .td2 { line-height: 340px; } /* AIRING */ .animetitle + small { position: relative; line-height: 1px !important; } td:nth-of-type(6) { line-height: 20px !important; } You can't use Konachan's links they're not an image host youre hotlinking from them so they blocked your links- you can only use an image host as said in the tutorial like Tinypic, Photobucket etc. |
Jul 27, 2012 2:56 PM
#237
oh gotcha thanks. i tried hosting my own image earlier but the picture was really small. nvm i got it working thanks again. |
Angel_BeatsJul 27, 2012 3:02 PM
![]() |
Jul 27, 2012 4:09 PM
#238
Angel_Beats said: oh gotcha thanks. i tried hosting my own image earlier but the picture was really small. nvm i got it working thanks again. Good remember those image host sites give you multiple links you want the direct link and they often have image resizers you can use or might be turned on. You can also resize the image yourself in an image editor. |
Jul 31, 2012 12:59 PM
#239
Could someone please explain to me how to insert a link into a image. I want to make a link to my anime and manga lists, but I have no idea how. |
Jul 31, 2012 7:35 PM
#240
Gouko_Tenrou said: Could someone please explain to me how to insert a link into a image. I want to make a link to my anime and manga lists, but I have no idea how. [url=LINK URL HERE][img]IMAGE URL HERE[/img][/url] Is this for your profile and posts? You'll need to use this. Replace only LINK URL HERE with the url you're directing to, replace only IMAGE URL HERE with an uploaded image's direct link. Leave everything else intact and leave no spaces. Then it'll display the image + when you click it takes you to the url you chose to direct to. The tags will disappear then, only the image will show when its done correctly. If thats not clear you can use my quick or full BBcode guides it has good examples: http://myanimelist.net/forum/?topicid=419453 |
Shishio-kunJul 31, 2012 7:42 PM
Aug 1, 2012 12:57 AM
#241
Shishio-kun said: Gouko_Tenrou said: Could someone please explain to me how to insert a link into a image. I want to make a link to my anime and manga lists, but I have no idea how. [url=LINK URL HERE][img]IMAGE URL HERE[/img][/url] Is this for your profile and posts? You'll need to use this. Replace only LINK URL HERE with the url you're directing to, replace only IMAGE URL HERE with an uploaded image's direct link. Leave everything else intact and leave no spaces. Then it'll display the image + when you click it takes you to the url you chose to direct to. The tags will disappear then, only the image will show when its done correctly. If thats not clear you can use my quick or full BBcode guides it has good examples: http://myanimelist.net/forum/?topicid=419453 Almost, like in your one guide you show an image of a about me, with some links to their manga and anime lists. How do you put the code into an image? |
Aug 1, 2012 9:18 PM
#242
Hi, I have some question regarding the code. http://myanimelist.net/animelist/LordSilen&status=1&order=0 how can I make it like this profile, I mean when you point the mouse to an anime, it show: 1/ the picture outside the table, with the name appears if possible. 2/ the line highlight on the anime titles, episode, progress. How can I do that, the source code makes me dizzy @_@. This is my list http://myanimelist.net/animelist/Vforvendetta&status=1&order=0 what should I add into the code? |
Takana_no_HanaAug 1, 2012 9:55 PM
Aug 2, 2012 8:01 PM
#243
Gouko_Tenrou said: Shishio-kun said: Gouko_Tenrou said: Could someone please explain to me how to insert a link into a image. I want to make a link to my anime and manga lists, but I have no idea how. [url=LINK URL HERE][img]IMAGE URL HERE[/img][/url] Is this for your profile and posts? You'll need to use this. Replace only LINK URL HERE with the url you're directing to, replace only IMAGE URL HERE with an uploaded image's direct link. Leave everything else intact and leave no spaces. Then it'll display the image + when you click it takes you to the url you chose to direct to. The tags will disappear then, only the image will show when its done correctly. If thats not clear you can use my quick or full BBcode guides it has good examples: http://myanimelist.net/forum/?topicid=419453 Almost, like in your one guide you show an image of a about me, with some links to their manga and anime lists. How do you put the code into an image? Sorry that guide you're referring to is a mess thanks to MAL glitch and was under construction as it was so its not super reliable.. I would remove it but there's still useful info, not planning to update it anytime soon tho.. Using tags like that is how you do it, you just insert them into your about me description. I think what you're referring to is a profile About Me like mine where links appear in set parts of a layout but the layout image is one seamless image. The way people do that is piece together a lot of cut out images into one giant image, and add the individual links to those cut out parts (usually before with careful planning). You have to make sure the total width on the images on a line don't exceed 640px, and that they all have the same height so they fit with whats above them. If you right click view background image on such images like on my manga About Me you'll see how they're cut out images. Some About Me designs are liek 30 cut out images lol. |
Shishio-kunAug 2, 2012 8:06 PM
Aug 2, 2012 8:04 PM
#244
Vforvendetta said: Hi, I have some question regarding the code. http://myanimelist.net/animelist/LordSilen&status=1&order=0 how can I make it like this profile, I mean when you point the mouse to an anime, it show: 1/ the picture outside the table, with the name appears if possible. 2/ the line highlight on the anime titles, episode, progress. How can I do that, the source code makes me dizzy @_@. This is my list http://myanimelist.net/animelist/Vforvendetta&status=1&order=0 what should I add into the code? Man I would love both to use these lists as premade layouts here... there's something similar in the Touhou premade you can maybe try to add to yours or make a variation of. |
Aug 3, 2012 3:59 PM
#245
Ah yeah, I've managed to do it, but the animation of the effect seems to be constant, I couldn't make the highlight on the anime line (episode, score, title, etc) when hovering the mouse on it at the same time when the dvd cover appears on the right. |
Aug 6, 2012 12:39 AM
#246
Is there a way make the search bar in-line with the animelist? I don't want it to be right justified with the window. I would like it to go out only as far as the anime list does. Is that possible? |
Aug 7, 2012 1:51 AM
#247
@ofx360: #mal_cs_powered { position: absolute; right: 50% !important; margin-right: -350px; } |
Aug 7, 2012 9:04 PM
#248
Good enough! Thanks for the reply Now for something a bit tougher, maybe: .td1, .td2, .table_header { border-color: white; border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0; border-top-width: 0 !important; } Doesn't seem to work for me. I've tried a few variations, but i don't know what the heck Here is my Frankenstein CSS: /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 background: url("http://img94.imageshack.us/img94/4530/11thj.png") silver; #292929 */ body { background:url("http://dl.dropbox.com/u/68627640/MAL/BG/Fade.png") center top repeat-x, url("http://dl.dropbox.com/u/68627640/MAL/Pics/hyouka_31.jpg") center top no-repeat, url("http://dl.dropbox.com/u/68627640/MAL/BG/weave.jpg"); Background-color: #292929; } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: #c0c0c2; display: inline-block !important; height: 40px !important; left: 0px !important; margin: auto !important; position: absolute !important; right: 0 !important; top: 565px !important; width: 100% !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 12; margin: 0 auto; padding-bottom: 10px; padding-top: 283px; max-width: 700px; min-width: 680px; } /* FONT Font used across the whole list. */ body { font-family: Verdana, arial; font-size: 80%; font-weight: 550; } #list_surround table:first-of-type td:nth-of-type(1){ width: 125px !important; position: absolute; font-size: 90%; font-weight: normal; } #list_surround table:first-of-type td:nth-of-type(2){ width: 80px !important; position: absolute; margin-left:130px; font-size: 90%; font-weight: normal; } #list_surround table:first-of-type td:nth-of-type(3){ width: 80px !important; position: absolute; margin-left:215px; font-size: 90%; font-weight: normal; } #list_surround table:first-of-type td:nth-of-type(4){ width: 80px !important; position: absolute; margin-left:300px; font-size: 90%; font-weight: normal; } #list_surround table:first-of-type td:nth-of-type(5){ width: 100px !important; position: absolute; margin-left:385px; font-size: 90%; font-weight: normal; } #list_surround table:first-of-type td:nth-of-type(6){ width: 80px !important; position: absolute; margin-left:490px; font-size: 90%; font-weight: normal; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #F0EBEB; text-decoration: none; text-shadow: none; } a:hover { color: #FFFFFF; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; text-align: center !important; } .status_not_selected a, .status_selected a { background-color: rgba(138, 138, 169, 0.6); border-color: rgba(48, 44, 64, 0.0); border-radius: 0px 0px 0px 0px; border-style: dotted; border-width: 1px; color: #FFFFFF; display: block !important; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); margin-top: 150px; } .status_selected a { background-color: #c0c0c2; border-bottom-color: #d60c0c; border-bottom-width: 1px; color: black; } .status_not_selected a { background-color: rgba(98, 171, 216, 0.5); } .status_not_selected a:hover { background-color: #59b70b; } .status_selected a:hover { background-color: #c0c0c2; border-bottom-color: #75ff02; border-bottom-width: 1.2px; color: #183005; } /* HEADER */ .table_header { background-color: #343434; } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(130, 1, 0, 0.3); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(171, 201, 212, 0.3); } .td1, .td2, .table_header { border-color: white; border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0; border-top-width: 0 !important; } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(13, 53, 79, 1); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 10px; font-weight: 600; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 20px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { background-color: rgba(130, 1, 0, 0.5); border-radius: 0 0 3px 3px; color: #EEEEEE; text-align: center; } /* CURRENTLY WATCHING/READING HEADER The image and font above your currently watched and read animes/mangas. Color is the color of the font. Font-family is the type of font. Font-size is the pixel size of the font. You can change all these! */ .header_cw { text-align: center; font-size:25px; font-weight:800; color: #ffffff; } /* COMPLETED HEADER The image and font of the header above your completed animes/mangas. */ .header_completed { text-align: center; font-size:25px; font-weight:800; color: #ffffff; } /* ON-HOLD HEADER The image and font of the header above your animes/mangas on-hold. */ .header_onhold { text-align: center; font-size:25px; font-weight:800; color: #ffffff; } /* DROPPED HEADER The image and font of the header above your dropped animes/mangas. */ .header_dropped { text-align: center; font-size:25px; font-weight:800; color: #ffffff; } /* PLAN TO WATCH/READ HEADER The image and font of the header above the anime/manga you plan to see or read on your list. */ .header_ptw { text-align: center; font-size:25px; font-weight:800; color: #ffffff; } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Aug 7, 2012 9:30 PM
#249
@ofx360 That's 'cause you have this: .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } a few lines lower, right under /* LIST SETTINGS */ Just remove border: 0;, should be fine |
![]() |
Aug 7, 2012 10:43 PM
#250
![]() That seemed beyond simple now that you pointed it out. Sorry to bother, and thanks...i'm sure i'll be back for more help! I'm slowly, slowly tweaking my list and learning this CSS business for the first time. This is a lot more challenging than i thought it would be...fun and kinda addicting, though |
More topics from this board
» [CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design ( 1 2 3 )Valerio_Lyndon - Aug 1, 2022 |
111 |
by Shishio-kun
»»
1 hour ago |
|
» [CSS Modern] ⭐️ NieR Automata Menu Layout - Killingdyl ( 1 2 )killingdyl - Apr 22, 2017 |
51 |
by Mula_Niilista
»»
Mar 24, 11:20 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
18 |
by Shishio-kun
»»
Mar 19, 5:45 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1255 |
by Shishio-kun
»»
Mar 19, 11:21 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
380 |
by cosmicskye
»»
Mar 12, 8:35 AM |