New
Mar 12, 2013 1:26 PM
#801
Shishio-kun said: GoldenBRS said: How to put the text on the pic go left? Not enough info you need to say what part too since it can vary.. but probably text-align: left; no not the css but the picture on it. ![]() |
Mar 12, 2013 1:52 PM
#802
Still not enough info... what program you using? There should be text align options somewhere near your text editor no matter what tool it is. |
Mar 12, 2013 2:02 PM
#803
Shishio-kun said: Still not enough info... what program you using? There should be text align options somewhere near your text editor no matter what tool it is. Does paint count as a tool? I have that as a tool as my program. |
Mar 12, 2013 2:55 PM
#804
Hmm I don't see such an option in Paint. Its a pretty limited program for editing your own images. |
Mar 12, 2013 2:57 PM
#805
Shishio-kun said: Hmm I don't see such an option in Paint. Its a pretty limited program for editing your own images. Hmm. Which program will work for it? |
Mar 12, 2013 5:07 PM
#806
GoldenBRS said: Shishio-kun said: Hmm I don't see such an option in Paint. Its a pretty limited program for editing your own images. Hmm. Which program will work for it? Gimp is free and a little easier to use than most programs. Jasc Animation shop is even easier but a little harder to get ahold of plus its not free after 90 days. Both programs you simply drag the pic into the program you wanna edit and click the icon with a 'A' to edit text. When you're done in Gimp go to File then Export and Export to get a copy of your edited image. In Jasc go to File and Save Frame as, choose JPG or PNG file type. For Gimp you can see the text tool used at this part of my video. Under the Tool Options window which I zoom in on, you'll see "Justify"- this sets your text alignment. The left setting is the one you want. http://youtu.be/rBR9t6AKyCE?t=7m26s |
Mar 12, 2013 7:10 PM
#807
Cool thanks! That help me alot! |
Mar 13, 2013 5:00 AM
#808
Hello, First of all, I'm sorry if I am asking for something so obvious or asking it in a wrong place but I had read all of your rules and tutorials yet couldn't find what I was looking for.. It's a very little detail but it somehow bothers me a lot, so I just taught maybe someone could help about it :) Here below are printscreen of my manga list and anime list, I didn't image code them cause I taught there are huge for forum outline but anyway you can view them by clicking the links of course.. http://i48.tinypic.com/2hpo9ja.png http://i49.tinypic.com/14w8squ.png I had enhanced my tag width of my lists and decrease the width of the "type" row in my manga list with the help of your tips and tutorials. Although it seems that in my manga list "search" box has been overly placed though it didn't happen on my animelist. I know it's a very minor problem but it bugs me since I am mostly using my ipad to view my lists. I would really appricate if someone could help me, Thank you very much :) |
Mar 13, 2013 5:48 AM
#809
@_White_Lotus_ Try /* // Self-explanatory */ BODY { color: #FFFFFF; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin: 0 auto; width: 920px; } /* // All links on your list */ a { color: #7C9EB3; text-decoration: none; } a:visited { color: #7C9EB3; text-decoration: none; } a:hover { color: #7C9EB3; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #464646; } /* // Alternating row color 2 */ .td2 { color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #5A5A5A; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: #FFFFF; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #000000; background-color: #000000; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #464646; } .status_not_selected { color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #000000; padding: 2px; background-color: #5A5A5A; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 920px; } /* Animetitle's box width */ td:nth-of-type(4) { width: 160px; } /* Animetitle header width */ .table_header:nth-of-type(4) { width: 160px; } /* Animetitle's box width */ td:nth-of-type(5) { width: 260px; } /* Animetitle header width */ .table_header:nth-of-type(5) { width: 260px; } |
Mar 13, 2013 5:56 AM
#810
_White_Lotus_ said: Hello, First of all, I'm sorry if I am asking for something so obvious or asking it in a wrong place but I had read all of your rules and tutorials yet couldn't find what I was looking for.. It's a very little detail but it somehow bothers me a lot, so I just taught maybe someone could help about it :) Here below are printscreen of my manga list and anime list, I didn't image code them cause I taught there are huge for forum outline but anyway you can view them by clicking the links of course.. http://i48.tinypic.com/2hpo9ja.png http://i49.tinypic.com/14w8squ.png I had enhanced my tag width of my lists and decrease the width of the "type" row in my manga list with the help of your tips and tutorials. Although it seems that in my manga list "search" box has been overly placed though it didn't happen on my animelist. I know it's a very minor problem but it bugs me since I am mostly using my ipad to view my lists. I would really appricate if someone could help me, Thank you very much :) wow, something I was surprised as well at first, but... You see, there are two, should I say "tables" with "nth-of-type(X)" codes in CSS. One is meant for the colums in the top bar, and the other for the list !!! That's why you should use >>#list_surround << before >>...nth-of-type(X)<<. So in your case just copy the code below and replace it with what you wrote: /* Animetitle's box width */ #list_surround td:nth-of-type(4) { width: 60px; } /* Animetitle header width */ #list_surround .table_header:nth-of-type(4) { width: 60px; } /* Animetitle's box width */ #list_surround td:nth-of-type(5) { width: 350px; } /* Animetitle header width */ #list_surround .table_header:nth-of-type(5){ width: 350px; } I tested it on my manga list both with your code, where the search button goes crazy, and with what I realized with firefox's Firebug (that you should use >>#list_surround <<), and where everything looks good now...hehehe _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Additionly, if you want, you can change the width of buttons for what kind of list you want to look at (Currently reading/watching,... , All manga/anime). This is done with the following codes, that you can add at the end of your CSS, (but make sure 1 out of 5 of them is set as "auto" !!!): /* ---Currently reading/watching,... , All manga/anime---*/ #list_surround table:first-of-type td:nth-of-type(1){ width: auto; } #list_surround table:first-of-type td:nth-of-type(2){ width: 150px; } #list_surround table:first-of-type td:nth-of-type(3){ width: 150px; } #list_surround table:first-of-type td:nth-of-type(4){ width: 150px; } #list_surround table:first-of-type td:nth-of-type(5){ width: 150px; } |
MonsterguyMar 13, 2013 6:44 AM
Mar 13, 2013 12:18 PM
#811
sorry if i asking a simple question but it can't be helped for me :( I'm currently change my header and missing just one image although I already add pic url to the header but everything else is just fine. I want to add this pic in the .header_cw{ Here's my current code @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/gintokigang_zps57b10853.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; } #inlineContent { background: url(none); display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } :hover + .hide { background-size: cover; left: 0px; top: 350px; height: 250px; width: 200px; padding-bottom: 0px; border-color: transparent; border-radius: 25px 25px 25px 25px; background-color: transparent; background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } .hide:before { background: transparent; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } #list_surround { background: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/logogintamacopy_zpse3bad132.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } body { font-family: arial; } a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #B42030; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ */ .header_cw { background-image: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/chibigin_zps064e90a8.png"); background-position: right; background-repeat: no-repeat; height: 300px; } .header_completed { background-image: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/hijikatachibi_zps37de2244.png"); background-position: right; background-repeat: no-repeat; height: 300px; } .header_onhold { background-image: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/katsurachibi_zpsbed4f506.png"); background-position: right; background-repeat: no-repeat; height: 300px; } .header_dropped { background-image: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/kagurachibi_zpse3c83af7.png"); background-position: right; background-repeat: no-repeat; height: 300px; } .header_ptw { background-image: url("http://i1287.photobucket.com/albums/a637/Andrew_Yap/chibiokita_zpsde5354da.png"); background-position: right; background-repeat: no-repeat; height: 300px; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(72, 64, 87, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; }[/spoler] |
Yap30Mar 13, 2013 12:24 PM
Mar 13, 2013 2:47 PM
#812
Yap30 said: sorry if i asking a simple question but it can't be helped for me :( I'm currently change my header and missing just one image although I already add pic url to the header but everything else is just fine. I want to add this pic in the .header_cw{ Its probably because you have an extra */ in front of the code you wanna edit but can't in the CSS. Private list, can't inspect it to test it out... |
Mar 14, 2013 3:01 PM
#814
Ok I would like to make a list with a grey 3d border this is a very rough sketch of what I want to make I am completely stuck on how to make a border, preferably one a little better than this. the watching part is actually suppose to be within the border ![]() |
clone4Mar 14, 2013 5:33 PM
Mar 16, 2013 8:05 AM
#815
Hi, I'm just wondering if there are any thread about creating a preview box which surround an anime cover when you hover in(like the style, etc). And can I put an image next to the preview box when I hover onto the title? And what is the code for displaying only watching anime titles when entering anime list? |
Takana_no_HanaMar 18, 2013 7:34 AM
Mar 18, 2013 1:20 PM
#816
Takana_no_Hana said: Hi, I'm just wondering if there are any thread about creating a preview box which surround an anime cover when you hover in(like the style, etc). I don't know if I understood you correctly, but were you looking for something like this: http://myanimelist.net/forum/?topicid=563993 Takana_no_Hana said: And can I put an image next to the preview box when I hover onto the title? depends, if the thread I directed you above is correct then it is possible, otherwise I don't know... Takana_no_Hana said: And what is the code for displaying only watching anime titles when entering anime list? Once again I'm not 100% sure what you want, why there are two codes for "currently watching". One is a link for header, and the other one is a header(header or title is probably the one you wanted), and for header the code is: .header_cw span { } PS: Go in chrome and with right click(mouse) look at "elements"(last one after the click from mouse). Important is you have the following layout open, to look for any code you want: http://myanimelist.net/animelist/ShishiExample |
MonsterguyMar 19, 2013 3:02 AM
Mar 22, 2013 8:29 AM
#817
clone4 said: Ok I would like to make a list with a grey 3d border this is a very rough sketch of what I want to make I am completely stuck on how to make a border, preferably one a little better than this. the watching part is actually suppose to be within the border ![]() Adding a certain code at the end of your list would give you a border similar to this, more I don't know, sorry: ![]() The code I added at the end of your current code: #list_surround { /* -List/table moving accross the screen- */ margin-right:0px; /* -Use this to change the width of your list- */ width:530px !important; /* -Borders- */ border-top: ridge 20px gray; border-bottom: ridge 20px gray; border-left: ridge 10px gray; border-right: ridge 10px gray; border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } |
MonsterguyMar 22, 2013 9:09 AM
Mar 22, 2013 8:52 AM
#818
@Monsterguy thanks man |
Mar 23, 2013 12:22 PM
#819
I'm not sure if this is the correct section to post this question in but if you have the time can you fix my anime list. I want it so the picture I have on my anime list are much clearer and if possible can I have it so if your hover over the title of an anime the picture of the cover will pop out? MyAnimeList /* 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://img818.imageshack.us/img818/6292/hotd1r.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * [url=http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png]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); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png'); } Thanks in Advance! |
Mar 23, 2013 11:14 PM
#820
jjrocks24 said: I'm not sure if this is the correct section to post this question in but if you have the time can you fix my anime list. I want it so the picture I have on my anime list are much clearer and if possible can I have it so if your hover over the title of an anime the picture of the cover will pop out? MyAnimeList /* 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://img818.imageshack.us/img818/6292/hotd1r.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * [url=http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png]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); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png'); } Thanks in Advance! You need a higher quality pic. It will always look blurry stretched out. tut on that: http://myanimelist.net/forum/?topicid=563993 |
Mar 24, 2013 2:50 AM
#821
Hey, This is currently how my anime list is listed http://img202.imageshack.us/img202/953/78605908.png the "score" use to be notes and you could add notes to it however i changed the text to score, removed the button for notes but now i wish it change it so it will actually show the score i gave the anime and i can't figure out the code / how to do that! Sorry :/ complete noob at css Thanks~ |
Nidh0ggMar 24, 2013 6:34 PM
Mar 24, 2013 5:35 AM
#822
Hi Shishio, love your video tutorial for About me design and links! One question, how do I create a url (bbcode) for people to message me and friend request?I have the buttons on my design and it's all on my profile but I can't find a way to the pages or URLs, please help? |
Mar 24, 2013 7:29 AM
#823
Hello! Can someone help me a bit? I'm trying to put 2 images next to my list, 1 to the left and 1 to the right using the "inlinecontent" method. These two: on the left: el2 on the right: el I only managed to put up one, but I can't move it, if I edit the position it just disappears. And if I put the blonde girl to the left it looks perfect on 1920*1080, but on lower resolution it goes behind the list. Is it possible to make it scale-able, so its next to the list on lower resolutions, too? Here is my code: * { 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://i650.photobucket.com/albums/uu229/aaafafafa/kek.jpg) repeat-y scroll center bottom #000c18; } #inlineContent { background: url(http://i650.photobucket.com/albums/uu229/aaafafafa/el_zps5608e49b.png) no-repeat fixed transparent !important; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 2000px !important; z-index: -1 !important;} #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #000c18; border-left:1px solid #000c18; border-right:1px solid #000c18; height:100%; left:141px; margin:239px auto 30px; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/b_cw.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_cw.jpg) 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:#006185; 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://i650.photobucket.com/albums/uu229/aaafafafa/b_com.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_oh.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_dr.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_ptw.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_all.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/banner4.jpg) repeat scroll 0 0 transparent; height:169px; left:-283px; padding:25px; position:absolute; top:-229px; 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://i650.photobucket.com/albums/uu229/aaafafafa/1cw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1com.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1oh.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1pw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1dr.jpg) no-repeat scroll 0 0 transparent; } #list_surround .animetitle + small { color:#006185; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #copyright { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/kekalj.jpg) 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; } } Thanks! |
Mar 24, 2013 7:07 PM
#824
Okay so im not sure why atm but currently it doesn't show the score i gave an anime however, it shows it for other people, and if i log off i can see it. Picture ![]() Code .td1:nth-of-type(2):before, .td2:nth-of-type(2):before{ content:"+ Score : "; } .td1:nth-of-type(2) a, .td2:nth-of-type(2) a{ font-size:0px; } .td1:nth-of-type(2) a:after, .td2:nth-of-type(2) a:after{ content:"+"; font-size:10px ! important; } .td1:nth-of-type(2), .td2:nth-of-type(2){ height:auto; left:211px; margin-top:-60px; position:absolute; width:auto; } So i wish to make it display the score i gave an anime to me, and to make it so if you click on the square '+' it will go to the MAL edit pop up to change the score |
Mar 26, 2013 1:50 PM
#825
Hey Guys i have again some questions. 1. How to remove the categorie-buttons? 2. All my border rounds will show up, instead of the right top. How to fix? 3. I create this list of parts of lists in this club, i am not realy 100% now what i do. So maby some part of to code not anymore needed. What parts i can delete or need to fix? My CSS-Code: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1200px !important; z-index:-1 !important; } #list_surround { margin:0 auto; position:absolute; right:0px !important; left: 0px !important; width:900px; } body { font-family:cursive; } a { color:#FFFFFF; text-decoration:initial; text-shadow:none; } .table_header { background-color:rgba(50, 50, 50, 0.498039); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:10px; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:3px; } .td1 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .td2 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(50, 50, 50, 0.498039); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(50, 50, 50, 0.498039); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(50, 50, 50, 0.498039); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(50, 50, 50, 0.498039); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(50, 50, 50, 0.498039) 0 0 8px 8px; margin-left:-300px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donewatch_zpsca2e7ada.png); background-position:100% 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:50px; padding:0; position:fixed; top:30px; width:350px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donecomp_zps638c3a09.png); background-position:100% 0; top:130px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donehold_zpsbc5c2cf9.png); background-position:0 0; top:230px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donedrop_zps7408f3b1.png); background-position:100% 0; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/doneplan_zpsb28841ad.png); background-position:0 0; top:430px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/doneall_zpsf0e07cd3.png); background-position:100% 0; top:530px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:80px; width:350px; } .header_cw { background-color:transparent; background-image:url(http://i47.tinypic.com/jpgfi9.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_completed { background-color:transparent; background-image:url(http://i46.tinypic.com/op5hg1.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_onhold { background-color:transparent; background-image:url(http://i47.tinypic.com/25jv6h4.png); background-position:0 130px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_dropped { background-color:transparent; background-image:url(http://i47.tinypic.com/25yzx2g.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_ptw { background-color:transparent; background-image:url(http://i48.tinypic.com/2m3mjj8.png); background-position:0 130px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } 4. Can i add a part to my CSS who will edit all parts in on. What i mean: Possible? How to add? */ Fonts XXX/* orange { Font-Color: white Font-Shadow: Font famaly: Arial Font-Size: 18 } green { Font-Color: white Font-Shadow: Font famaly: Arial Font-Size: 16 } violet { Font-Color: white Font-Shadow: Font famaly: Arial Font-Size: 14 } Screenshoot: ![]() |
CrAziiJaN21Mar 28, 2013 4:48 PM
Mar 27, 2013 2:12 PM
#826
Hey guys, I'm trying add images over my list (with #inlinecontent). Problem is that I don't know how to add multiple pictures without messing the initial image. Can someone help me out? Thanks :D |
Mar 28, 2013 4:01 PM
#827
F4it said: Hey guys, I'm trying add images over my list (with #inlinecontent). Problem is that I don't know how to add multiple pictures without messing the initial image. Can someone help me out? Thanks :D Ok, first of all I was a little confused, why with "left: 40%;" you are sending inlineContent to the right for 40% of your screen, but than "margin: 0 0 0 -790px !important;" is sending it back for -790px. Why !? If you did not know with function "left" you start on left screen than you go to the right. Similar goes for others as well, why starting from right you go to the left, starting from top to the bottom, and lastly from bottom to the top (example: "bottom: 100px" starts from bottom and goes up for 100px, and that is all). Still, in your case it would be easier to start from left, but if you want a little more left even though you are automaticly starting at left when you write"left: X;" already, than you write "left: -100px"("left: -10%") or however much you want. But what do I know, I'm only a noob at CSS, why I just recently learned what little I know about CSS. And to top it all almost everything with the help of this club only... To sum it all up, I did not bother myself with your code any more after this, and was quite direct at the end...hehehe Here in red I marked those lines that I changed for you in "inlineContent", so that another(second) image appears: #inlineContent { background-image: url("http://i1281.photobucket.com/albums/a511/warsausage/shinon3_zpse6240da3.png"), url("http://wallpaperscraft.com/image/anime_girl_brunette_knife_spirit_20364_2560x1600.jpg"); width: 2200px !important; margin: 0 0 0 -790px !important; background-attachment: scroll, scroll !important; background-clip: border-box !important; background-color: transparent !important; background-origin: padding-box !important; background-position: left bottom, 32% 0% !important; background-repeat: no-repeat !important; background-size: contain, 200px 200px !important; bottom: 0 !important; display: inline-block !important; height:710px !important; left: 40% !important; position: fixed !important; z-index: -1; } For third image you just add one of "each" of those elements I marked in red. This is what you wanted right ??? |
MonsterguyMar 28, 2013 4:08 PM
Mar 29, 2013 6:56 AM
#828
Umm... I tried linking some words in my about me... but for some reason... I can't link them? can someone tell me what's wrong? Here: Ano Hi Mita Hana no Namae wo Bokutachi wa Mada Shiranai Mirai Nikki Angel Beats These 3... I cant link them... |
![]() |
Mar 29, 2013 7:52 AM
#829
AoiMizune-kun said: Umm... I tried linking some words in my about me... but for some reason... I can't link them? can someone tell me what's wrong? Here: Ano Hi Mita Hana no Namae wo Bokutachi wa Mada Shiranai Mirai Nikki Angel Beats These 3... I cant link them... I think there's a thing where you can't put certain characters in the URL like ! or ( ). So take those out and try these links instead: http://myanimelist.net/anime/10620/Mirai_Nikki http://myanimelist.net/anime/6547/Angel_Beats http://myanimelist.net/anime/9989/Ano_Hi_Mita_Hana_no_Namae_wo_Bokutachi_wa_Mada_Shiranai They all seem to link the same. |
Mar 29, 2013 7:56 AM
#830
Skullk1d28 said: Hi Shishio, love your video tutorial for About me design and links! One question, how do I create a url (bbcode) for people to message me and friend request?I have the buttons on my design and it's all on my profile but I can't find a way to the pages or URLs, please help? You would have a friend copy the links to message you and give them to you, or use a secondary account. They just right click those links and copy link and paste it to you: http://myanimelist.net/mymessages.php?go=send&toname=Skullk1d28 http://myanimelist.net/myfriends.php?go=add&id=1109797 |
Mar 29, 2013 8:10 AM
#831
CrAziiJaN21 said: Hey Guys i have again some questions. 1. How to remove the categorie-buttons? 2. All my border rounds will show up, instead of the right top. How to fix? 3. I create this list of parts of lists in this club, i am not realy 100% now what i do. So maby some part of to code not anymore needed. What parts i can delete or need to fix? My CSS-Code: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1200px !important; z-index:-1 !important; } #list_surround { margin:0 auto; position:absolute; right:0px !important; left: 0px !important; width:900px; } body { font-family:cursive; } a { color:#FFFFFF; text-decoration:initial; text-shadow:none; } .table_header { background-color:rgba(50, 50, 50, 0.498039); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:10px; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:3px; } .td1 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .td2 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(50, 50, 50, 0.498039); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(50, 50, 50, 0.498039); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(50, 50, 50, 0.498039); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(50, 50, 50, 0.498039); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(50, 50, 50, 0.498039) 0 0 8px 8px; margin-left:-300px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donewatch_zpsca2e7ada.png); background-position:100% 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:50px; padding:0; position:fixed; top:30px; width:350px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donecomp_zps638c3a09.png); background-position:100% 0; top:130px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donehold_zpsbc5c2cf9.png); background-position:0 0; top:230px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donedrop_zps7408f3b1.png); background-position:100% 0; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/doneplan_zpsb28841ad.png); background-position:0 0; top:430px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/doneall_zpsf0e07cd3.png); background-position:100% 0; top:530px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:80px; width:350px; } .header_cw { background-color:transparent; background-image:url(http://i47.tinypic.com/jpgfi9.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_completed { background-color:transparent; background-image:url(http://i46.tinypic.com/op5hg1.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_onhold { background-color:transparent; background-image:url(http://i47.tinypic.com/25jv6h4.png); background-position:0 130px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_dropped { background-color:transparent; background-image:url(http://i47.tinypic.com/25yzx2g.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_ptw { background-color:transparent; background-image:url(http://i48.tinypic.com/2m3mjj8.png); background-position:0 130px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } 4. Can i add a part to my CSS who will edit all parts in on. What i mean: Possible? How to add? */ Fonts XXX/* orange { Font-Color: white Font-Shadow: Font famaly: Arial Font-Size: 18 } green { Font-Color: white Font-Shadow: Font famaly: Arial Font-Size: 16 } violet { Font-Color: white Font-Shadow: Font famaly: Arial Font-Size: 14 } Screenshoot: ![]() 1. There is a tutorial on this already use that, "Customizing the category links" and "Removing sections from your list" 2. Already a tutorial on that "Rounding corners on any part of your list" 3. Lower the width of the list and reposition it to the right- there are tutorials on that as well with titles that pertain to that. 4. Not sure what you're trying to do at all and the CSS you've presented is all wrong with many errors you want one like the code you have and targeting selectors with color, not targeting colors. If you want to color those particular text a certain color and customize them individually there are many tutorials on individually customizing many fonts on the list or getting the codes for them. All you need to do is get the code and color them. If you want the table fonts Orange, Anime Title yellow, airing purple, numbers yellow and category totals purple tho I can give you a code to add to your CSS that will do that. I don't have pictures yet but all the tutorials are linked here: http://myanimelist.net/forum/?topicid=419405 |
Mar 29, 2013 8:24 AM
#832
SaSgz said: Hello! Can someone help me a bit? I'm trying to put 2 images next to my list, 1 to the left and 1 to the right using the "inlinecontent" method. These two: on the left: el2 on the right: el I only managed to put up one, but I can't move it, if I edit the position it just disappears. And if I put the blonde girl to the left it looks perfect on 1920*1080, but on lower resolution it goes behind the list. Is it possible to make it scale-able, so its next to the list on lower resolutions, too? Here is my code: * { 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://i650.photobucket.com/albums/uu229/aaafafafa/kek.jpg) repeat-y scroll center bottom #000c18; } #inlineContent { background: url(http://i650.photobucket.com/albums/uu229/aaafafafa/el_zps5608e49b.png) no-repeat fixed transparent !important; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 2000px !important; z-index: -1 !important;} #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #000c18; border-left:1px solid #000c18; border-right:1px solid #000c18; height:100%; left:141px; margin:239px auto 30px; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/b_cw.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_cw.jpg) 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:#006185; 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://i650.photobucket.com/albums/uu229/aaafafafa/b_com.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_oh.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_dr.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_ptw.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/b_all.jpg) 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://i650.photobucket.com/albums/uu229/aaafafafa/banner4.jpg) repeat scroll 0 0 transparent; height:169px; left:-283px; padding:25px; position:absolute; top:-229px; 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://i650.photobucket.com/albums/uu229/aaafafafa/1cw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1com.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1oh.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1pw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/1dr.jpg) no-repeat scroll 0 0 transparent; } #list_surround .animetitle + small { color:#006185; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #copyright { background:url(http://i650.photobucket.com/albums/uu229/aaafafafa/kekalj.jpg) 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; } } Thanks! I have a similar set up on my list atm, try mine with your images see if it works for you: #inlineContent { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i650.photobucket.com/albums/uu229/aaafafafa/el_zps5608e49b.png"), url("http://i650.photobucket.com/albums/uu229/aaafafafa/el2_zps9edd12c2.png"); background-origin: padding-box !important; background-position: left top, right top !important; background-repeat: no-repeat !important; bottom: 0 !important; display: inline-block !important; height: 657px !important; left: 50% !important; margin: 0px 0px 0 -800px !important; position: fixed !important; width: 1556px !important; z-index: -1; } You can adjust the distance they're split apart with width. The last number in margin determines the position of where they start from the left. So just mess with these three numbers. Using Firebug or similar live editor makes adjusting this code way easier btw. Also the copyright bar image is hanging out the sides cuz its not rendered fully. |
Mar 29, 2013 8:27 AM
#833
Shishio-kun said: AoiMizune-kun said: Umm... I tried linking some words in my about me... but for some reason... I can't link them? can someone tell me what's wrong? Here: Ano Hi Mita Hana no Namae wo Bokutachi wa Mada Shiranai Mirai Nikki Angel Beats These 3... I cant link them... I think there's a thing where you can't put certain characters in the URL like ! or ( ). So take those out and try these links instead: http://myanimelist.net/anime/10620/Mirai_Nikki http://myanimelist.net/anime/6547/Angel_Beats http://myanimelist.net/anime/9989/Ano_Hi_Mita_Hana_no_Namae_wo_Bokutachi_wa_Mada_Shiranai They all seem to link the same. Oh... Thanks! |
![]() |
Mar 29, 2013 9:28 AM
#834
Monsterguy said: F4it said: Hey guys, I'm trying add images over my list (with #inlinecontent). Problem is that I don't know how to add multiple pictures without messing the initial image. Can someone help me out? Thanks :D Ok, first of all I was a little confused, why with "left: 40%;" you are sending inlineContent to the right for 40% of your screen, but than "margin: 0 0 0 -790px !important;" is sending it back for -790px. Why !? If you did not know with function "left" you start on left screen than you go to the right. Similar goes for others as well, why starting from right you go to the left, starting from top to the bottom, and lastly from bottom to the top (example: "bottom: 100px" starts from bottom and goes up for 100px, and that is all). Still, in your case it would be easier to start from left, but if you want a little more left even though you are automaticly starting at left when you write"left: X;" already, than you write "left: -100px"("left: -10%") or however much you want. But what do I know, I'm only a noob at CSS, why I just recently learned what little I know about CSS. And to top it all almost everything with the help of this club only... To sum it all up, I did not bother myself with your code any more after this, and was quite direct at the end...hehehe Here in red I marked those lines that I changed for you in "inlineContent", so that another(second) image appears: #inlineContent { background-image: url("http://i1281.photobucket.com/albums/a511/warsausage/shinon3_zpse6240da3.png"), url("http://wallpaperscraft.com/image/anime_girl_brunette_knife_spirit_20364_2560x1600.jpg"); width: 2200px !important; margin: 0 0 0 -790px !important; background-attachment: scroll, scroll !important; background-clip: border-box !important; background-color: transparent !important; background-origin: padding-box !important; background-position: left bottom, 32% 0% !important; background-repeat: no-repeat !important; background-size: contain, 200px 200px !important; bottom: 0 !important; display: inline-block !important; height:710px !important; left: 40% !important; position: fixed !important; z-index: -1; } For third image you just add one of "each" of those elements I marked in red. This is what you wanted right ??? Hey Thanks very much :D I'll take my time to change the codes. The reason why the codes are like that is because I copy,pasted some codes from a pre-made layout. I just changed the images and messed up the necessary codes for my current look. Actually I didn't know how the positioning works with %, thats why I only moved my images with px. Must have been a nightmare for you to look at my CSS xD Anyway thank you for your time and help (^,^)b |
KriegWurstMar 29, 2013 9:41 AM
Mar 29, 2013 11:47 AM
#835
F4it said: Monsterguy said: F4it said: Hey guys, I'm trying add images over my list (with #inlinecontent). Problem is that I don't know how to add multiple pictures without messing the initial image. Can someone help me out? Thanks :D Ok, first of all I was a little confused, why with "left: 40%;" you are sending inlineContent to the right for 40% of your screen, but than "margin: 0 0 0 -790px !important;" is sending it back for -790px. Why !? If you did not know with function "left" you start on left screen than you go to the right. Similar goes for others as well, why starting from right you go to the left, starting from top to the bottom, and lastly from bottom to the top (example: "bottom: 100px" starts from bottom and goes up for 100px, and that is all). Still, in your case it would be easier to start from left, but if you want a little more left even though you are automaticly starting at left when you write"left: X;" already, than you write "left: -100px"("left: -10%") or however much you want. But what do I know, I'm only a noob at CSS, why I just recently learned what little I know about CSS. And to top it all almost everything with the help of this club only... To sum it all up, I did not bother myself with your code any more after this, and was quite direct at the end...hehehe Here in red I marked those lines that I changed for you in "inlineContent", so that another(second) image appears: #inlineContent { background-image: url("http://i1281.photobucket.com/albums/a511/warsausage/shinon3_zpse6240da3.png"), url("http://wallpaperscraft.com/image/anime_girl_brunette_knife_spirit_20364_2560x1600.jpg"); width: 2200px !important; margin: 0 0 0 -790px !important; background-attachment: scroll, scroll !important; background-clip: border-box !important; background-color: transparent !important; background-origin: padding-box !important; background-position: left bottom, 32% 0% !important; background-repeat: no-repeat !important; background-size: contain, 200px 200px !important; bottom: 0 !important; display: inline-block !important; height:710px !important; left: 40% !important; position: fixed !important; z-index: -1; } For third image you just add one of "each" of those elements I marked in red. This is what you wanted right ??? Hey Thanks very much :D I'll take my time to change the codes. The reason why the codes are like that is because I copy,pasted some codes from a pre-made layout. I just changed the images and messed up the necessary codes for my current look. Actually I didn't know how the positioning works with %, thats why I only moved my images with px. Must have been a nightmare for you to look at my CSS xD Anyway thank you for your time and help (^,^)b Well, for quick learning I recommend "w3schools", where you will instantly know more (even more than I currently know) !!! So with following links you can quickly learn the skill about background-position and background-size. Here are also other description about background-position and background-size. |
MonsterguyMar 29, 2013 12:34 PM
Mar 29, 2013 12:17 PM
#836
Monsterguy said: F4it said: Monsterguy said: F4it said: Hey guys, I'm trying add images over my list (with #inlinecontent). Problem is that I don't know how to add multiple pictures without messing the initial image. Can someone help me out? Thanks :D Ok, first of all I was a little confused, why with "left: 40%;" you are sending inlineContent to the right for 40% of your screen, but than "margin: 0 0 0 -790px !important;" is sending it back for -790px. Why !? If you did not know with function "left" you start on left screen than you go to the right. Similar goes for others as well, why starting from right you go to the left, starting from top to the bottom, and lastly from bottom to the top (example: "bottom: 100px" starts from bottom and goes up for 100px, and that is all). Still, in your case it would be easier to start from left, but if you want a little more left even though you are automaticly starting at left when you write"left: X;" already, than you write "left: -100px"("left: -10%") or however much you want. But what do I know, I'm only a noob at CSS, why I just recently learned what little I know about CSS. And to top it all almost everything with the help of this club only... To sum it all up, I did not bother myself with your code any more after this, and was quite direct at the end...hehehe Here in red I marked those lines that I changed for you in "inlineContent", so that another(second) image appears: #inlineContent { background-image: url("http://i1281.photobucket.com/albums/a511/warsausage/shinon3_zpse6240da3.png"), url("http://wallpaperscraft.com/image/anime_girl_brunette_knife_spirit_20364_2560x1600.jpg"); width: 2200px !important; margin: 0 0 0 -790px !important; background-attachment: scroll, scroll !important; background-clip: border-box !important; background-color: transparent !important; background-origin: padding-box !important; background-position: left bottom, 32% 0% !important; background-repeat: no-repeat !important; background-size: contain, 200px 200px !important; bottom: 0 !important; display: inline-block !important; height:710px !important; left: 40% !important; position: fixed !important; z-index: -1; } For third image you just add one of "each" of those elements I marked in red. This is what you wanted right ??? Hey Thanks very much :D I'll take my time to change the codes. The reason why the codes are like that is because I copy,pasted some codes from a pre-made layout. I just changed the images and messed up the necessary codes for my current look. Actually I didn't know how the positioning works with %, thats why I only moved my images with px. Must have been a nightmare for you to look at my CSS xD Anyway thank you for your time and help (^,^)b Well, for quick learning I recommend "w3schools", where you will instantly know more (even more than I currently know) !!! So with following links you can quickly learn the skill about background-position and background-size. Here is also other description about background-position and background-size. Thanks for the info! :D |
Mar 29, 2013 12:25 PM
#837
Okay, finaly after 2 hours i remove the categorie buttons and edit the fonts. But i still dont found the mistake on my CSS to show up the rounds of my right top(table header). And why my table headers dont wonne change to Arial and 18px? CSS: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg"); background-position: 0 50%, 0 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Arial,Helvetica,sans-serif; } .td1, .td2, a, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Arial,Helvetica,sans-serif; text-decoration: none; vertical-align: top; } #inlineContent { display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { left: 0 !important; margin: 0 auto; position: absolute; right: 0 !important; width: 800px; } .table_header { background-color: rgba(50, 50, 50, 0.498); } .table_header:first-of-type { border-radius: 10px 10px 0 0; } .table_header:nth-of-type(2) { padding-left: 35px; text-align: left; } .table_header:last-of-type { border-radius: 0 10px 0 0; } .td1 { background-color: rgba(60, 60, 60, 0.498); height: 65px; } .td2 { background-color: rgba(70, 70, 70, 0.498); height: 65px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 0 0 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; text-align: center; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin-top: 10px; padding: 8px; text-align: center; } .hide { background-color: rgba(50, 50, 50, 0.498); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 7px 7px 7px 7px; display: inline-block !important; height: 55px; margin-left: 25px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px rgba(50, 50, 50, 0.498); margin-left: -350px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 35px; text-align: left; vertical-align: top; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-bottom-style: none !important; border-bottom-width: medium !important; display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; height: 0 !important; left: 65px; line-height: 16px !important; margin-top: 16px; position: absolute; text-align: justify !important; width: 720px; z-index: 2; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } a, .td1, .td2, .category_totals { } .animetitled { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 16px; } .header_title { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 18px; } .table_header { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; } .header_cw { background-color: transparent; background-image: url("http://i47.tinypic.com/jpgfi9.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_completed { background-color: transparent; background-image: url("http://i46.tinypic.com/op5hg1.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i47.tinypic.com/25jv6h4.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i47.tinypic.com/25yzx2g.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i48.tinypic.com/2m3mjj8.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .table_header:first-of-type { border-radius: 10px 0 0 0; } |
CrAziiJaN21Mar 30, 2013 2:39 PM
Mar 30, 2013 5:52 AM
#838
Shishio-kun said: I have a similar set up on my list atm, try mine with your images see if it works for you: #inlineContent { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i650.photobucket.com/albums/uu229/aaafafafa/el_zps5608e49b.png"), url("http://i650.photobucket.com/albums/uu229/aaafafafa/el2_zps9edd12c2.png"); background-origin: padding-box !important; background-position: left top, right top !important; background-repeat: no-repeat !important; bottom: 0 !important; display: inline-block !important; height: 657px !important; left: 50% !important; margin: 0px 0px 0 -800px !important; position: fixed !important; width: 1556px !important; z-index: -1; } You can adjust the distance they're split apart with width. The last number in margin determines the position of where they start from the left. So just mess with these three numbers. Using Firebug or similar live editor makes adjusting this code way easier btw. Also the copyright bar image is hanging out the sides cuz its not rendered fully. Thank you! I have one question left: Is it possible to make the buttons on left scroll-able, so there isn't an empty space next to the list? |
Mar 30, 2013 1:28 PM
#839
How do I change the text color of the progress numbers and type genres? http://i.imgur.com/Bi4rKJT.png Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url("http://i.imgur.com/HUeFwk8.jpg"); } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: url(none) 0% -26% no-repeat; display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !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(none) no-repeat scroll 50% 1px transparent; font-size: 50%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 70px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #a7a7a7; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(50, 50, 50, 0.6); border-color: rgba(70, 70, 70, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(98, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.5); } .status_not_selected a:hover { background-color: #890000; border-color: #000000; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #890000; border-color: rgba(32, 28, 58, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(30, 30, 30, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* 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(89, 89, 89, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(89, 89, 89, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(30, 30, 30, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(30, 30, 30, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(30, 30, 30, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; color: #FFFFFF; font-family: verdana; font-size: 30px; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(30, 30, 30, 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(0, 0, 0, 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."; } body { background-size: cover; } body{ background-attachment: fixed} |
Mar 30, 2013 2:22 PM
#840
SaSgz said: Shishio-kun said: I have a similar set up on my list atm, try mine with your images see if it works for you: #inlineContent { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i650.photobucket.com/albums/uu229/aaafafafa/el_zps5608e49b.png"), url("http://i650.photobucket.com/albums/uu229/aaafafafa/el2_zps9edd12c2.png"); background-origin: padding-box !important; background-position: left top, right top !important; background-repeat: no-repeat !important; bottom: 0 !important; display: inline-block !important; height: 657px !important; left: 50% !important; margin: 0px 0px 0 -800px !important; position: fixed !important; width: 1556px !important; z-index: -1; } You can adjust the distance they're split apart with width. The last number in margin determines the position of where they start from the left. So just mess with these three numbers. Using Firebug or similar live editor makes adjusting this code way easier btw. Also the copyright bar image is hanging out the sides cuz its not rendered fully. Thank you! I have one question left: Is it possible to make the buttons on left scroll-able, so there isn't an empty space next to the list? Yes, although it's really little work to do, but a lot to explain, so tell me if you want me to do it for you. Nonetheless let me also point this out to you in advance: "My believe is that the way you have it now looks better !!!" But just to be sure, you want it similar to this right (if you want me to do the job for you, please tell me): http://myanimelist.net/animelist/SylakentH_ |
Mar 30, 2013 2:43 PM
#841
FoulFoal said: How do I change the text color of the progress numbers and type genres? http://i.imgur.com/Bi4rKJT.png Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url("http://i.imgur.com/HUeFwk8.jpg"); } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: url(none) 0% -26% no-repeat; display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !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(none) no-repeat scroll 50% 1px transparent; font-size: 50%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 70px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #a7a7a7; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(50, 50, 50, 0.6); border-color: rgba(70, 70, 70, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(98, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.5); } .status_not_selected a:hover { background-color: #890000; border-color: #000000; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #890000; border-color: rgba(32, 28, 58, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(30, 30, 30, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* 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(89, 89, 89, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(89, 89, 89, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(30, 30, 30, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(30, 30, 30, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(30, 30, 30, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; color: #FFFFFF; font-family: verdana; font-size: 30px; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(30, 30, 30, 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(0, 0, 0, 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."; } body { background-size: cover; } body{ background-attachment: fixed} For you only (I also tested it): /*******************/ /* Highlights Rows */ /*******************/ table tbody tr .td1, table tbody tr .td2 { color: white !important; } /****************************/ /* small text like "Airing" */ /****************************/ td:nth-of-type(2) small{ color: black; } Just copy and paste the code at the end of your existing code !!! EDIT: The code above changed the color of all text on your rows, what I saw as better, but changing specific row(s) only, is also possible !!! |
MonsterguyMar 30, 2013 2:51 PM
Mar 30, 2013 3:45 PM
#842
Monsterguy said: Thank you but that only works for Airing/Not aired yet next to the anime title which is another thing I wanted. I figured it out though so no worries. FoulFoal said: How do I change the text color of the progress numbers and type genres? http://i.imgur.com/Bi4rKJT.png Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url("http://i.imgur.com/HUeFwk8.jpg"); } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: url(none) 0% -26% no-repeat; display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !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(none) no-repeat scroll 50% 1px transparent; font-size: 50%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 70px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #a7a7a7; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(50, 50, 50, 0.6); border-color: rgba(70, 70, 70, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(98, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.5); } .status_not_selected a:hover { background-color: #890000; border-color: #000000; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #890000; border-color: rgba(32, 28, 58, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(30, 30, 30, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* 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(89, 89, 89, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(89, 89, 89, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(30, 30, 30, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(30, 30, 30, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(30, 30, 30, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; color: #FFFFFF; font-family: verdana; font-size: 30px; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(30, 30, 30, 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(0, 0, 0, 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."; } body { background-size: cover; } body{ background-attachment: fixed} For you only (I also tested it): /*******************/ /* Highlights Rows */ /*******************/ table tbody tr .td1, table tbody tr .td2 { color: white !important; } /****************************/ /* small text like "Airing" */ /****************************/ td:nth-of-type(2) small{ color: black; } Just copy and paste the code at the end of your existing code !!! EDIT: The code above changed the color of all text on your rows, what I saw as better, but changing specific row(s) only, is also possible !!! For those interested on how I changed it: Add "color: white" to this code. .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center vertical-align: middle; And it should look like this: .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; color: white |
snkMMar 30, 2013 3:54 PM
Mar 30, 2013 4:08 PM
#843
Monsterguy said: SaSgz said: Shishio-kun said: I have a similar set up on my list atm, try mine with your images see if it works for you: #inlineContent { background-attachment: scroll !important; background-clip: border-box !important; background-color: transparent !important; background-image: url("http://i650.photobucket.com/albums/uu229/aaafafafa/el_zps5608e49b.png"), url("http://i650.photobucket.com/albums/uu229/aaafafafa/el2_zps9edd12c2.png"); background-origin: padding-box !important; background-position: left top, right top !important; background-repeat: no-repeat !important; bottom: 0 !important; display: inline-block !important; height: 657px !important; left: 50% !important; margin: 0px 0px 0 -800px !important; position: fixed !important; width: 1556px !important; z-index: -1; } You can adjust the distance they're split apart with width. The last number in margin determines the position of where they start from the left. So just mess with these three numbers. Using Firebug or similar live editor makes adjusting this code way easier btw. Also the copyright bar image is hanging out the sides cuz its not rendered fully. Thank you! I have one question left: Is it possible to make the buttons on left scroll-able, so there isn't an empty space next to the list? Yes, although it's really little work to do, but a lot to explain, so tell me if you want me to do it for you. Nonetheless let me also point this out to you in advance: "My believe is that the way you have it now looks better !!!" But just to be sure, you want it similar to this right (if you want me to do the job for you, please tell me): http://myanimelist.net/animelist/SylakentH_ Yeah that is the kind I had in mind, but I just noticed that if you would change it, not all of the buttons would be viewable. So I take your advice and don't change it. However I really appreciate your help! |
Mar 31, 2013 1:52 PM
#844
CrAziiJaN21 said: Okay, finaly after 2 hours i remove the categorie buttons and edit the fonts. But i still dont found the mistake on my CSS to show up the rounds of my right top(table header). And why my table headers dont wonne change to Arial and 18px? CSS: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg"); background-position: 0 50%, 0 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Arial,Helvetica,sans-serif; } .td1, .td2, a, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Arial,Helvetica,sans-serif; text-decoration: none; vertical-align: top; } #inlineContent { display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { left: 0 !important; margin: 0 auto; position: absolute; right: 0 !important; width: 800px; } .table_header { background-color: rgba(50, 50, 50, 0.498); } .table_header:first-of-type { border-radius: 10px 10px 0 0; } .table_header:nth-of-type(2) { padding-left: 35px; text-align: left; } .table_header:last-of-type { border-radius: 0 10px 0 0; } .td1 { background-color: rgba(60, 60, 60, 0.498); height: 65px; } .td2 { background-color: rgba(70, 70, 70, 0.498); height: 65px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 0 0 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; text-align: center; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin-top: 10px; padding: 8px; text-align: center; } .hide { background-color: rgba(50, 50, 50, 0.498); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 7px 7px 7px 7px; display: inline-block !important; height: 55px; margin-left: 25px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px rgba(50, 50, 50, 0.498); margin-left: -350px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 35px; text-align: left; vertical-align: top; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-bottom-style: none !important; border-bottom-width: medium !important; display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; height: 0 !important; left: 65px; line-height: 16px !important; margin-top: 16px; position: absolute; text-align: justify !important; width: 720px; z-index: 2; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } a, .td1, .td2, .category_totals { } .animetitled { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 16px; } .header_title { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 18px; } .table_header { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; } .header_cw { background-color: transparent; background-image: url("http://i47.tinypic.com/jpgfi9.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_completed { background-color: transparent; background-image: url("http://i46.tinypic.com/op5hg1.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i47.tinypic.com/25jv6h4.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i47.tinypic.com/25yzx2g.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i48.tinypic.com/2m3mjj8.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .table_header:first-of-type { border-radius: 10px 0 0 0; } |
Apr 1, 2013 1:52 AM
#845
@CrAziiJaN21 You know what: "Not even one sentence made any sense to me, in all your posts !!!" Still you provided picture, what gave me some directions... CrAziiJaN21 said: Screenshoot: ![]() Just copy-paste this code at the end of your existing CSS code: .table_header { /* Gradient Borders */ border-top: 1px solid orange !important; border-bottom: 1px solid orange !important; } .table_header:nth-of-type(5) { border-right: 1px solid orange !important; } .table_header:first-of-type { /* Gradient Borders */ border-left: 1px solid orange; } .table_header:last-of-type { /* -everything written here would affect ONLY header from "Tags" that is not displayed- */ } /****************************/ /* small text like "Airing" */ /****************************/ td:nth-of-type(2) small{ color: red; } /**********/ /* -Tags- */ /**********/ .td1:nth-of-type(6), .td2:nth-of-type(6) { color:violet !important; border-top: 1px solid transparent !important; } /************/ /* -Table- */ /************/ .td1:nth-of-type(1), .td2:nth-of-type(1) { border-left: 1px solid rgb(102,255,51) !important; } .td1, .td2 { border-top: 1px solid rgb(102,255,51) !important; border-bottom: 1px solid rgb(102,255,51) !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { border-right: 1px solid rgb(102,255,51) !important; } /************/ /* -Others- */ /************/ .category_totals { border: 1px solid BlueViolet !important; } #grand_totals { border: 3px solid BlueViolet !important; } #copyright { border: 3px solid BlueViolet !important; } To tell you the truth it would really be hard to do it as you wish (maybe with darkened transparent background, but that it would have solid colorful border...). So what I got you above was the best I could do for you with codes, sorry. |
Apr 1, 2013 6:17 AM
#846
1. This questens are done and cleared since 3 days. Nuff said. 2. My aktualy questens are: CrAziiJaN21 said: Okay, finaly after 2 hours i remove the categorie buttons and edit the fonts. But i still dont found the mistake on my CSS to show up the rounds of my right top(table header). And why my table headers dont wonne change to Arial and 18px? CSS: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg"); background-position: 0 50%, 0 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Arial,Helvetica,sans-serif; } .td1, .td2, a, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Arial,Helvetica,sans-serif; text-decoration: none; vertical-align: top; } #inlineContent { display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { left: 0 !important; margin: 0 auto; position: absolute; right: 0 !important; width: 800px; } .table_header { background-color: rgba(50, 50, 50, 0.498); } .table_header:first-of-type { border-radius: 10px 10px 0 0; } .table_header:nth-of-type(2) { padding-left: 35px; text-align: left; } .table_header:last-of-type { border-radius: 0 10px 0 0; } .td1 { background-color: rgba(60, 60, 60, 0.498); height: 65px; } .td2 { background-color: rgba(70, 70, 70, 0.498); height: 65px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 0 0 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; text-align: center; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin-top: 10px; padding: 8px; text-align: center; } .hide { background-color: rgba(50, 50, 50, 0.498); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 7px 7px 7px 7px; display: inline-block !important; height: 55px; margin-left: 25px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px rgba(50, 50, 50, 0.498); margin-left: -350px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 35px; text-align: left; vertical-align: top; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-bottom-style: none !important; border-bottom-width: medium !important; display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; height: 0 !important; left: 65px; line-height: 16px !important; margin-top: 16px; position: absolute; text-align: justify !important; width: 720px; z-index: 2; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } a, .td1, .td2, .category_totals { } .animetitled { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 16px; } .header_title { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 18px; } .table_header { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; } .header_cw { background-color: transparent; background-image: url("http://i47.tinypic.com/jpgfi9.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_completed { background-color: transparent; background-image: url("http://i46.tinypic.com/op5hg1.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i47.tinypic.com/25jv6h4.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i47.tinypic.com/25yzx2g.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i48.tinypic.com/2m3mjj8.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .table_header:first-of-type { border-radius: 10px 0 0 0; } |
Apr 1, 2013 1:14 PM
#847
CrAziiJaN21 said: Okay, finaly after 2 hours i remove the categorie buttons and edit the fonts. But i still dont found the mistake on my CSS to show up the rounds of my right top(table header). And why my table headers dont wonne change to Arial and 18px? If I understood you correctly you wanted something like this (copy-paste this code at the end of your existing CSS code): .table_header:nth-of-type(5) { border-radius: 0px 10px 0px 0px; } .table_header { font-size: 18px !important; font-family: Arial; } If I didn't understood you correctly, please make a picture(like you did before: " Screenshoot") of what you want !!! |
Apr 1, 2013 2:39 PM
#848
2 questions. 1st question. I wouldn't be surprised if it was asked several times but I'm not going through the 43-44 pages. Music. Can you add music too your list? I'm aware it may be bothersome to others but regardless, I would like to know and if it is possible, how. Such as when opening the page, it loads the MP3 straight from the link. (Random example of a link/url directly linked to a Mp3) 2nd question. Can I change the value of the score into a comment/text? Like instead of having a score say a number from 1 to 10, is there a way I can overwrite that text and have it be listed as a personal comment/text? I'm only looking to do this for a single anime so it isn't really a problem overall but just curious. |
Apr 1, 2013 4:57 PM
#849
Okay now the rounds will show up. But the Title still dosent work. CSS: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg"); background-position: 0 50%, 0 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Arial,Helvetica,sans-serif; } .td1, .td2, a, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Arial,Helvetica,sans-serif; text-decoration: none; vertical-align: top; } #inlineContent { display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { left: 0 !important; margin: 0 auto; position: absolute; right: 0 !important; width: 800px; } .table_header { background-color: rgba(50, 50, 50, 0.498); } .table_header:first-of-type { border-radius: 10px 10px 0 0; } .table_header:nth-of-type(2) { padding-left: 35px; text-align: left; } .table_header:last-of-type { border-radius: 0 10px 0 0; } .td1 { background-color: rgba(60, 60, 60, 0.498); height: 65px; } .td2 { background-color: rgba(70, 70, 70, 0.498); height: 65px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 0 0 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; text-align: center; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin-top: 10px; padding: 8px; text-align: center; } .hide { background-color: rgba(50, 50, 50, 0.498); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 7px 7px 7px 7px; display: inline-block !important; height: 55px; margin-left: 25px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px rgba(50, 50, 50, 0.498); margin-left: -350px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 35px; text-align: left; vertical-align: top; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-bottom-style: none !important; border-bottom-width: medium !important; display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; height: 0 !important; left: 65px; line-height: 16px !important; margin-top: 16px; position: absolute; text-align: justify !important; width: 720px; z-index: 2; } .table_header:nth-of-type(5) { border-radius: 0px 10px 0px 0px; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } a, .td1, .td2, .category_totals { } .animetitled { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 16px; } .header_title { color: white; font-family: Arial,Helvetica,sans-serif !important; font-size: 18px; font-weight:normal !important; } .table_header { color: white; font-family: Arial,Helvetica,sans-serif !important; font-size: 18px; font-weight:normal !important; } .header_cw { background-color: transparent; background-image: url("http://i47.tinypic.com/jpgfi9.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_completed { background-color: transparent; background-image: url("http://i46.tinypic.com/op5hg1.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i47.tinypic.com/25jv6h4.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i47.tinypic.com/25yzx2g.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i48.tinypic.com/2m3mjj8.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .table_header:first-of-type { border-radius: 10px 0 0 0; } Screenshoot: ![]() |
Apr 2, 2013 12:36 AM
#850
CrAziiJaN21 said: Okay now the rounds will show up. But the Title still dosent work. CSS: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://dl.dropbox.com/u/78192465/MyAnimeList/Hinata/Images/bamboo.jpg"); background-position: 0 50%, 0 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Arial,Helvetica,sans-serif; } .td1, .td2, a, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Arial,Helvetica,sans-serif; text-decoration: none; vertical-align: top; } #inlineContent { display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { left: 0 !important; margin: 0 auto; position: absolute; right: 0 !important; width: 800px; } .table_header { background-color: rgba(50, 50, 50, 0.498); } .table_header:first-of-type { border-radius: 10px 10px 0 0; } .table_header:nth-of-type(2) { padding-left: 35px; text-align: left; } .table_header:last-of-type { border-radius: 0 10px 0 0; } .td1 { background-color: rgba(60, 60, 60, 0.498); height: 65px; } .td2 { background-color: rgba(70, 70, 70, 0.498); height: 65px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 0 0 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; text-align: center; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(50, 50, 50, 0.498); border-radius: 10px 10px 10px 10px; color: white; font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin-top: 10px; padding: 8px; text-align: center; } .hide { background-color: rgba(50, 50, 50, 0.498); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border: 1px solid #FFFFFF; border-radius: 7px 7px 7px 7px; display: inline-block !important; height: 55px; margin-left: 25px; margin-top: -65px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 8px 8px rgba(50, 50, 50, 0.498); margin-left: -350px; padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left: 35px; text-align: left; vertical-align: top; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0 0; background-repeat: repeat repeat; border-bottom-style: none !important; border-bottom-width: medium !important; display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; height: 0 !important; left: 65px; line-height: 16px !important; margin-top: 16px; position: absolute; text-align: justify !important; width: 720px; z-index: 2; } .table_header:nth-of-type(5) { border-radius: 0px 10px 0px 0px; } .table_header:nth-of-type(6) { display: none; } span[id*="tagRow"] { display: block !important; } span[id*="tagLinks"] { display: none !important; } a, .td1, .td2, .category_totals { } .animetitled { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 16px; } .header_title { color: white; font-family: Arial,Helvetica,sans-serif !important; font-size: 18px; font-weight:normal !important; } .table_header { color: white; font-family: Arial,Helvetica,sans-serif !important; font-size: 18px; font-weight:normal !important; } .header_cw { background-color: transparent; background-image: url("http://i47.tinypic.com/jpgfi9.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_completed { background-color: transparent; background-image: url("http://i46.tinypic.com/op5hg1.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_onhold { background-color: transparent; background-image: url("http://i47.tinypic.com/25jv6h4.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_dropped { background-color: transparent; background-image: url("http://i47.tinypic.com/25yzx2g.png"); background-position: 0 125px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .header_ptw { background-color: transparent; background-image: url("http://i48.tinypic.com/2m3mjj8.png"); background-position: 0 130px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -100px; } .table_header:first-of-type { border-radius: 10px 0 0 0; } Screenshoot: ![]() Once again you told me nothing, why you did not specify the most important information: How do you want your title to appear ??? NOTE: make a "full screenshot" ("if possible" provide the link from where you took that picture) of somebody's list (even premade list would be good) and mark what you want from that list, for me to implement into your list, also here it does not bother me if the picture is "a little" smaller(but not smaller than a premade layout images), just that it's clearly seen, and marked with "ellipse like shape", what you want from there !!! |
MonsterguyApr 2, 2013 12:39 AM
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
384 |
by Shishio-kun
»»
Yesterday, 11:08 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
64 |
by NightmareTala
»»
Oct 5, 1:08 PM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
35 |
by iluvmozu
»»
Oct 4, 11:41 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |