New
Apr 7, 2013 8:24 AM
#851
Could anyone help me with a slight problem ^^? One of my friends told me my list is screwed up and that the names are caught off ![]() From that SS you can see he's right, but when I look at my list from 3 different screens it's fine; From 1920x1080 reso to 1600x900 reso it's all good. His resolution was 1366x768. I also did the: body { background-size: cover; } It didn't work for him though? I also tried testing by changing my resolution to near the same and smaller, but it did same thing only thing different was I don't see the image over and over scrolling down, but just the list being cut off. if you need my CSS code to see if I did something wrong it's here @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://img19.imageshack.us/img19/765/wallpaper1453425.jpg) fixed center #000000; } body { cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #inlineContent { background: url() no-repeat scroll transparent center top !important; display: inline-block !important; height: 425px !important; left: -282px !important; margin: auto !important; right: 0px !important; top: -425px !important; width: 900px !important; position:absolute; z-index: -1 !important; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-920px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; height:100%; left:-450px; top:0px; margin:239px auto 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } } Body { background-size: cover; } |
Apr 7, 2013 8:33 AM
#852
Hello :) I see the major problem. Here : #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; height:100%; left:-450px; top:0px; margin:239px auto 30px; position:relative; width:618px; } This send your list 450px on the left. Put "left: 0px;" already and changes the value according to your envy. |
Apr 7, 2013 8:42 AM
#853
Luxiamimi said: Hello :) I see the major problem. Here : #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; height:100%; left:-450px; top:0px; margin:239px auto 30px; position:relative; width:618px; } This send your list 450px on the left. Put "left: 0px;" already and changes the value according to your envy. Ah, tyvm. The reason I did that is because I wanted the girl int he Wallpaper to be seen, while browsing my list so I moved my list to the left like that. |
TyrelApr 7, 2013 8:45 AM
Apr 7, 2013 3:12 PM
#854
@Tyrel just for you I wrote the code that should not effect the change of resolution !!! all you need to do is to add it at the bottom of your existing CSS code (be it old or your updated CSS code, it does not matter): #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } body { background-size: 100% 100% !important; } #copyright { width: 100% !important; } #list_surround { /*width: 40% !important;*/ width: 50% !important; left:10px !important; top: 200px !important; margin:0 !important; } This is how it can look like on all screens: ![]() If you instead insert value that is marked in red above, from the code I wrote, it becomes: ![]() PS: BTW your background is incredible !!! |
MonsterguyApr 7, 2013 4:31 PM
Apr 8, 2013 12:39 AM
#855
Hey everyone I'm trying to fix up one of my old layouts but I have a problem. I'm trying to make my category buttons at 0.7 opacity normally just sitting there, and when you hover it is 1 opacity. Also the category you are in already is 1 opacity if you know what i mean. I have done this many times but now it isnt working? I don't know but I think its something counter acting it or something. The code that I thought would do it is at the bottom. Also, any reason why the all anime button is larger than the others? Like even if you go under it, it still shows its clickable ._. Screenshot: ![]() Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i49.tinypic.com/34ep7qw.jpg); background-position:initial initial; background-repeat:initial initial; background-size:cover; } * { border:0 none; color:#FFFFFF; font-family:Verdana; font-size:11px; font-weight:normal; text-decoration:none; } #inlineContent { background-attachment:scroll !important; background-color:transparent !important; background-image:url(http://i50.tinypic.com/2j4axj5.png) !important; background-position:50% 0 !important; background-repeat:no-repeat no-repeat !important; display:inline-block !important; height:425px !important; left:-582px !important; margin:auto !important; position:absolute; right:0 !important; top:-425px !important; width:900px !important; z-index:-1 !important; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i49.tinypic.com/34pynar.png); background-position:0 0; background-repeat:repeat repeat; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0; width:270px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/10n6idy.jpg); background-position:0 0; background-repeat:repeat repeat; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i45.tinypic.com/13zwin6.png); background-position:0 0; background-repeat:repeat repeat; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/rhsrhz.png); background-position:0 0; background-repeat:repeat repeat; 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-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/2qiyzog.png); background-position:0 0; background-repeat:repeat repeat; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/15yvri9.png); background-position:0 0; background-repeat:no-repeat no-repeat; display:inline; padding-bottom:30px; top:550px; } #list_surround .header_cw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/djaJO.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_completed { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/3jcgG.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_onhold { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/L4bVw.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_ptw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/cJTI9.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_dropped { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/gWhVk.png); background-position:0 0; background-repeat:no-repeat no-repeat; } a:hover { text-decoration:underline; } #list_surround { background-attachment:scroll; background-color:rgba(255, 77, 210, 0.74902); background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; height:100%; left:141px; margin:239px auto 30px; position:relative; top:180px; width:618px; } #list_surround .status_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:0; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#FF9E96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0.75; } #list_surround .status_selected a { opacity:1; } #copyright { color:#3A4358; font-family:sans-serif; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#3A4358; } #copyright { } tr:hover [class^="td"] { background-color:#AC00E6; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } |
TheHolyPotatoApr 8, 2013 12:52 AM
Apr 8, 2013 4:01 AM
#856
TheHolyPotato said: Hey everyone I'm trying to fix up one of my old layouts but I have a problem. I'm trying to make my category buttons at 0.7 opacity normally just sitting there, and when you hover it is 1 opacity. Also the category you are in already is 1 opacity if you know what i mean. I have done this many times but now it isnt working? I don't know but I think its something counter acting it or something. The code that I thought would do it is at the bottom. Also, any reason why the all anime button is larger than the others? Like even if you go under it, it still shows its clickable ._. Screenshot: ![]() Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i49.tinypic.com/34ep7qw.jpg); background-position:initial initial; background-repeat:initial initial; background-size:cover; } * { border:0 none; color:#FFFFFF; font-family:Verdana; font-size:11px; font-weight:normal; text-decoration:none; } #inlineContent { background-attachment:scroll !important; background-color:transparent !important; background-image:url(http://i50.tinypic.com/2j4axj5.png) !important; background-position:50% 0 !important; background-repeat:no-repeat no-repeat !important; display:inline-block !important; height:425px !important; left:-582px !important; margin:auto !important; position:absolute; right:0 !important; top:-425px !important; width:900px !important; z-index:-1 !important; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i49.tinypic.com/34pynar.png); background-position:0 0; background-repeat:repeat repeat; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0; width:270px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/10n6idy.jpg); background-position:0 0; background-repeat:repeat repeat; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i45.tinypic.com/13zwin6.png); background-position:0 0; background-repeat:repeat repeat; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/rhsrhz.png); background-position:0 0; background-repeat:repeat repeat; 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-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/2qiyzog.png); background-position:0 0; background-repeat:repeat repeat; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/15yvri9.png); background-position:0 0; background-repeat:no-repeat no-repeat; display:inline; padding-bottom:30px; top:550px; } #list_surround .header_cw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/djaJO.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_completed { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/3jcgG.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_onhold { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/L4bVw.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_ptw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/cJTI9.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_dropped { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/gWhVk.png); background-position:0 0; background-repeat:no-repeat no-repeat; } a:hover { text-decoration:underline; } #list_surround { background-attachment:scroll; background-color:rgba(255, 77, 210, 0.74902); background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; height:100%; left:141px; margin:239px auto 30px; position:relative; top:180px; width:618px; } #list_surround .status_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:0; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#FF9E96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0.75; } #list_surround .status_selected a { opacity:1; } #copyright { color:#3A4358; font-family:sans-serif; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#3A4358; } #copyright { } tr:hover [class^="td"] { background-color:#AC00E6; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } Simple, just erase from your CSS code (near the bottom): * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; Than everything should work, I tested it !!! _ _ _ _ _ _ _ _ On the other hand you can just erase this entire section at the end of your CSS: * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } and write (at the end of your CSS) only: .status_not_selected { opacity:0.7; } .status_not_selected:hover { opacity:1; } I would do the last and faster way, really the code is shorter and you don't even need everything else in order for all to function as you want !!! |
MonsterguyApr 8, 2013 4:29 AM
Apr 8, 2013 4:14 AM
#857
TheHolyPotato said: Hey everyone I'm trying to fix up one of my old layouts but I have a problem. I'm trying to make my category buttons at 0.7 opacity normally just sitting there, and when you hover it is 1 opacity. Also the category you are in already is 1 opacity if you know what i mean. I have done this many times but now it isnt working? I don't know but I think its something counter acting it or something. The code that I thought would do it is at the bottom. Also, any reason why the all anime button is larger than the others? Like even if you go under it, it still shows its clickable ._. Screenshot: ![]() Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i49.tinypic.com/34ep7qw.jpg); background-position:initial initial; background-repeat:initial initial; background-size:cover; } * { border:0 none; color:#FFFFFF; font-family:Verdana; font-size:11px; font-weight:normal; text-decoration:none; } #inlineContent { background-attachment:scroll !important; background-color:transparent !important; background-image:url(http://i50.tinypic.com/2j4axj5.png) !important; background-position:50% 0 !important; background-repeat:no-repeat no-repeat !important; display:inline-block !important; height:425px !important; left:-582px !important; margin:auto !important; position:absolute; right:0 !important; top:-425px !important; width:900px !important; z-index:-1 !important; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i49.tinypic.com/34pynar.png); background-position:0 0; background-repeat:repeat repeat; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0; width:270px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/10n6idy.jpg); background-position:0 0; background-repeat:repeat repeat; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i45.tinypic.com/13zwin6.png); background-position:0 0; background-repeat:repeat repeat; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/rhsrhz.png); background-position:0 0; background-repeat:repeat repeat; 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-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/2qiyzog.png); background-position:0 0; background-repeat:repeat repeat; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/15yvri9.png); background-position:0 0; background-repeat:no-repeat no-repeat; display:inline; padding-bottom:30px; top:550px; } #list_surround .header_cw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/djaJO.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_completed { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/3jcgG.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_onhold { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/L4bVw.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_ptw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/cJTI9.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_dropped { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/gWhVk.png); background-position:0 0; background-repeat:no-repeat no-repeat; } a:hover { text-decoration:underline; } #list_surround { background-attachment:scroll; background-color:rgba(255, 77, 210, 0.74902); background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; height:100%; left:141px; margin:239px auto 30px; position:relative; top:180px; width:618px; } #list_surround .status_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:0; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#FF9E96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0.75; } #list_surround .status_selected a { opacity:1; } #copyright { color:#3A4358; font-family:sans-serif; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#3A4358; } #copyright { } tr:hover [class^="td"] { background-color:#AC00E6; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } The reason of why the All Anime button is larger is because you've added padding at its bottom: #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/15yvri9.png); background-position:0 0; background-repeat:no-repeat no-repeat; display:inline; padding-bottom:30px; top:550px; } You should remove it, or put a 0px value on it. While the reason why the surrounding areas are still click able is because of this code: #list_surround .status_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } Try to change the padding the same size with your picture size. I'd recommend to change it to: padding:100px 0 0 240px; As for why the button don't have opacity try adding !important behind it. .status_selected { display:block; opacity: 1 !important; } .status_not_selected { display:block; opacity:0.7 !important; } .status_not_selected:hover { color:transparent; opacity:1 !important; } |
azzuReApr 8, 2013 4:17 AM
The most important things in life is the people that you care about |
Apr 8, 2013 4:16 AM
#858
TheHolyPotato said: Hey everyone I'm trying to fix up one of my old layouts but I have a problem. I'm trying to make my category buttons at 0.7 opacity normally just sitting there, and when you hover it is 1 opacity. Also the category you are in already is 1 opacity if you know what i mean. I have done this many times but now it isnt working? I don't know but I think its something counter acting it or something. The code that I thought would do it is at the bottom. Also, any reason why the all anime button is larger than the others? Like even if you go under it, it still shows its clickable ._. My solution @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i49.tinypic.com/34ep7qw.jpg); background-position:initial initial; background-repeat:initial initial; background-size:cover; } * { border:0 none; color:#FFFFFF; font-family:Verdana; font-size:11px; font-weight:normal; text-decoration:none; } #inlineContent { background-attachment:scroll !important; background-color:transparent !important; background-image:url(http://i50.tinypic.com/2j4axj5.png) !important; background-position:50% 0 !important; background-repeat:no-repeat no-repeat !important; display:inline-block !important; height:425px !important; left:-582px !important; margin:auto !important; position:absolute; right:0 !important; top:-425px !important; width:900px !important; z-index:-1 !important; } .status_not_selected a, .status_selected a { content: none !important; color: transparent !important; } .status_not_selected, .status_selected { position: absolute; display: block; left: -283px; width: 270px; height: 100px; background-attachment: scroll; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .status_not_selected { opacity: 0.7; } .status_selected, .status_not_selected:hover { opacity: 1; } .status_selected, .status_not_selected { background-image:url(http://i49.tinypic.com/34pynar.png); top:0; } .status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected { background-image:url(http://i47.tinypic.com/10n6idy.jpg); top:110px; } .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i45.tinypic.com/13zwin6.png); top:220px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i47.tinypic.com/rhsrhz.png); top:330px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i47.tinypic.com/2qiyzog.png); top:440px; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i47.tinypic.com/15yvri9.png); top:550px; } #list_surround .header_cw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/djaJO.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_completed { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/3jcgG.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_onhold { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/L4bVw.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_ptw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/cJTI9.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_dropped { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/gWhVk.png); background-position:0 0; background-repeat:no-repeat no-repeat; } a:hover { text-decoration:underline; } #list_surround { background-attachment:scroll; background-color:rgba(255, 77, 210, 0.74902); background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; height:100%; left:141px; margin:239px auto 30px; position:relative; top:180px; width:618px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:0; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#FF9E96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { display:none; } #copyright { color:#3A4358; font-family:sans-serif; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#3A4358; } #copyright { } tr:hover [class^="td"] { background-color:#AC00E6; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; |
HahaidoApr 8, 2013 4:19 AM
Apr 8, 2013 4:58 AM
#859
Thanks alot you guys! |
Apr 8, 2013 5:54 PM
#860
Hi, okay I can't get the border on the left of my manga list to show up, also I had my top bar edited one way, but it's changed back to the original format and I can't seem to change it back. Thank you for your time. |
Apr 12, 2013 11:23 AM
#861
clone4 said: Hi, okay I can't get the border on the left of my manga list to show up, also I had my top bar edited one way, but it's changed back to the original format and I can't seem to change it back. Thank you for your time. You need to add a border-left to the selectors for the 1 and 2 boxes .td1:nth-of-type(1){ border-left-width: 2px !Important; border-color: black; border-style: solid; } .td2:nth-of-type(1){ border-left-width: 2px !Important; border-color: black; border-style: solid; } you'll also need one on the bottom of td.table_header:nth-of-type(1) Top bar: there's no bracket after .category_totals { border-radius: 0 0 500px 500px; bottom of your code. You can use this list for getting codes for particular boxes not 100% perfect but very useful: http://myanimelist.net/animelist/ShishiExample |
Apr 12, 2013 11:27 AM
#862
Grim-Wolf said: can somebody show me how to make or post gif ' s ? Always use the front page menu- under Graphic Design there's many GIF tutorials. Under Profile, Posts, and Sigs is a beginner's tutorial on how to post images in your posts and the other popular tricks. |
Apr 15, 2013 4:41 AM
#864
Hello guys, now 30 min i'm looking for something and could not find so i'm asking here: is it possible to change the show title padding only for a specific rate category ? For example, i want all the animes on my list rated "4" to have a title left padding higher than the rest. |
My list - "Let's share our lame sides" (Danshi Koukousei no Nichijou) |
Apr 15, 2013 9:23 AM
#865
Hi, I'm having a lot of trouble with customizing the font colors on my list. I want the font in my header title to be one color and then the font in my table rows to be another. But for some reason it does this instead:![]() Here is my code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i48.tinypic.com/15rcwsg.png); background-size:cover; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 50px; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:50px; width:63.6%; } body { font-family:'Comic Sans MS'; color:#FFF; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFF; text-decoration:initial; text-shadow:none; } a:hover { color:#FF0000; text-shadow:none; } .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:#FF9900; border:1px solid rgba(255, 255, 255, 0.498039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; color:#FFFFFF; display:block !important; font-weight:bold; padding:18px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:#FF301A; border-color:rgba(255, 255, 255, 0.498039); } .status_not_selected a:hover { background-color:#FFB300; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:#FF1A00; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:#FF301A; } .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; } .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:20px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } tr:hover [class^="td"] { background-color:#FF9900; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .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; } .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FF301A; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFF; text-align:center; } null { } [class^="header_"] * { font-size:19px; height:60px; 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(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } .header_cw { background-color:transparent; background-image:url(http://i50.tinypic.com/2cigpxf.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:215px; margin-bottom:0; } .header_completed { background-color:transparent; background-image:url(http://i46.tinypic.com/3479wea.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:220px; margin-bottom:0; } .header_onhold { background-color:transparent; background-image:url(http://i48.tinypic.com/2qkku2p.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:210px; margin-bottom:0; } .header_dropped { background-color:transparent; background-image:url(http://i50.tinypic.com/sfaquo.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_ptw { background-color:transparent; background-image:url(http://i47.tinypic.com/r1ebv6.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_title { background-color:transparent !important; } tbody { background-color:transparent; background-image:none; } .header_title { color:transparent !important; font-size:0 !important; } #list_surround { left:20px !important; position:absolute !important; } Thank you in advance for your time. |
Apr 15, 2013 9:29 PM
#866
Different colors of text in rows because rows contain not only text but links too, that is why need different selectors /* Selectors for text in table rows (#, type, rated etc.) */ .td1, .td2 {} /* Selectors for links in table rows (animetitle, edit-more, progress etc.) */ .td1 a, .td2 a {} /* Selectors for text in header title (# etc.) */ .table_header {} /* Selectors for links in header title (animetitle, score, type, progress, rated etc.) */ .table_headerLink {} |
HahaidoApr 15, 2013 9:34 PM
Apr 16, 2013 12:27 AM
#867
Umm... I'd like to ask a question about the rounding the edges of the list... I'd like to have the edges of my list rounded like my manga list where the watching is in a different box than the completed and also the on-hold and so on... but when I tried the tutorial... It rounds the whole list and I have no Idea what to do... Here's my code: /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://www.emptyblue.it/data/wallpaper/AnoHiMitaHanaNoNamae/ano_hi_mita_hana_no_namae_0001.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:blue; color:yellow; font-family:english111 vivace bt; font-size:48px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:navy; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:cyan; font-family:comic Sans MS; font-size:20px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:730px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: blue; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } #list_surround { position: absolute !important; right: 1px !important;} body { background-size: cover; } #list_surround{ border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: white; } #list_surround { position: absolute !important; top: 110px;} LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(0, 150, 65, 0.7) !important; } |
![]() |
Apr 16, 2013 2:55 AM
#868
Delete line marked with red from your CSS #list_surround{ border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: white; } and add this .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { border-radius: 30px 30px 0 0; -o-border-radius: 30px 30px 0 0; -moz-border-radius: 30px 30px 0 0; -webkit-border-radius: 30px 30px 0 0; } .category_totals { border-radius: 0 0 30px 30px; -o-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; } |
Apr 16, 2013 3:52 AM
#869
Sh0wdown said: I'm reasking, tell me if my question is not clear enough, thank you.Hello guys, now 30 min i'm looking for something and could not find so i'm asking here: is it possible to change the show title padding only for a specific rate category ? For example, i want all the animes on my list rated "4" to have a title left padding higher than the rest. |
My list - "Let's share our lame sides" (Danshi Koukousei no Nichijou) |
Apr 16, 2013 4:13 AM
#870
Sh0wdown said: Hello guys, now 30 min i'm looking for something and could not find so i'm asking here: is it possible to change the show title padding only for a specific rate category ? For example, i want all the animes on my list rated "4" to have a title left padding higher than the rest. That is impossible. There is advanced selectors by attribute, attribute value but not by specific text in HTML tags |
HahaidoApr 16, 2013 4:20 AM
Apr 16, 2013 4:21 AM
#871
Hahaido said: Oh really ? So you mean that on this list he created a relation between rates and those animated chibis title by title?Sh0wdown said: Hello guys, now 30 min i'm looking for something and could not find so i'm asking here: is it possible to change the show title padding only for a specific rate category ? For example, i want all the animes on my list rated "4" to have a title left padding higher than the rest. That is impossible. There is advanced selectors by attribute, attribute value but not by specific text in CSS class |
My list - "Let's share our lame sides" (Danshi Koukousei no Nichijou) |
Apr 16, 2013 4:35 AM
#872
Apr 16, 2013 5:08 AM
#873
Apr 16, 2013 5:13 AM
#874
Apr 16, 2013 2:14 PM
#875
Hahaido said: Different colors of text in rows because rows contain not only text but links too, that is why need different selectors /* Selectors for text in table rows (#, type, rated etc.) */ .td1, .td2 {} /* Selectors for links in table rows (animetitle, edit-more, progress etc.) */ .td1 a, .td2 a {} /* Selectors for text in header title (# etc.) */ .table_header {} /* Selectors for links in header title (animetitle, score, type, progress, rated etc.) */ .table_headerLink {} Thanks so much! My list looks great now :) |
Apr 17, 2013 4:37 PM
#876
Apr 17, 2013 4:59 PM
#877
NeoAnkara said: Can I have different background pic from different option? I don't know if I understand the question. You have a different background pic than the original background of the layout you're using. So yes thats ok. |
Apr 17, 2013 5:01 PM
#878
Shishio-kun said: What I mean is that can I have my watchng and complete list have different background or something like that.NeoAnkara said: Can I have different background pic from different option? I don't know if I understand the question. You have a different background pic than the original background of the layout you're using. So yes thats ok. |
Apr 17, 2013 10:07 PM
#879
2NeoAnkara: http://myanimelist.net/forum/?topicid=544301 |
Apr 17, 2013 10:10 PM
#880
Thanks. |
Apr 18, 2013 4:24 PM
#881
Not sure if this is the right place to ask this... but, how do I add more than 5 favorites for manga, anime and characters on my profile page? I've seen many profiles while browsing randomly that have over 7 favorite anime, and even over 12 characters fav at a time! O_O how do they do that?! I tried asking but they won't share how they actually did it, only told me its got something to do with coding or finding a cliche of some sort.. not sure x'D |
..{ Nobody is perfect, I'm nobody! ~ ♥ |
Apr 18, 2013 5:24 PM
#882
lalami02 said: Not sure if this is the right place to ask this... but, how do I add more than 5 favorites for manga, anime and characters on my profile page? I've seen many profiles while browsing randomly that have over 7 favorite anime, and even over 12 characters fav at a time! O_O how do they do that?! I tried asking but they won't share how they actually did it, only told me its got something to do with coding or finding a cliche of some sort.. not sure x'D It has to do with lag in the server. Whenever it lags you take away one and then you add one I think. Then it doesn't notice you added one and you keep adding them. Thats pretty much the basis of it. |
Apr 18, 2013 6:25 PM
#883
lalami02 said: Not sure if this is the right place to ask this... but, how do I add more than 5 favorites for manga, anime and characters on my profile page? I've seen many profiles while browsing randomly that have over 7 favorite anime, and even over 12 characters fav at a time! O_O how do they do that?! I tried asking but they won't share how they actually did it, only told me its got something to do with coding or finding a cliche of some sort.. not sure x'D They won't tell you? I wish ppl didn't do that but they have their reasons... btw thats reminds me back in 2007 (on another site, Veoh) I was a noob in CSS and the few members on that site who knew CSS wouldn't tell me or any of the other ppl even how to do a basic background on our pages. But I learned how to elsewhere then shared the secrets with everyone lol then made my first public layouts, tutorial videos, and later club. If those one ppl were holding back their know-how to be special and unique I guess I kinda ruined that for them lol. Well anyways yeah I've heard its totally do it lag too. I wonder how it would have anything to do with coding, you can only put codes in the About Me and the glitch only affects the couple parts below it as far as we know. And what could they mean by cliches lol? |
Shishio-kunApr 18, 2013 6:28 PM
Apr 18, 2013 6:27 PM
#884
Apr 20, 2013 11:12 AM
#885
ok so i know i'm a super noob at this stuff, but i thought i'd try and make one of the requested layouts. specifically the katanagatari one. so far i got this far ![]() but i have a few question. 1) how can i put a background (like a black box which is see through) behind the titles at the very top (watching,ptw, on hold, etc..) 2)add the orange background of list behind the headers for each box (watching, completed, etc....) also open to suggestions. i realize i'm being a bother and shouldnt probably even consider taking a request, but i think practice makes perfect and i might learn from this stuff little by little :) for those who want the code here it is /* MAIN BACKGROUND */ body { background: url("http://i.imgur.com/2GRYY22.jpg"); background-position: 0% 0%; background-size: cover; background-attachment: fixed !important; } #list_surround { position: absolute !important; left: 1px !important;} /* SECOND BACKGROUND (with render) */ #inlineContent { background: url("http://i.imgur.com/jhvxAXF.png") 100% 0% no-repeat; display: inline-block !important; height: 1000px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 200px !important; top: 150px !important; width: 1350px !important; z-index: -1 !important; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:transparent; color:brown; font-family:english111 vivace bt; font-size:38px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:PaleVioletRed; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family:english111 vivace bt; font-size:12px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:wheat; font-family:english111 vivace bt; font-size:13px; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(255, 120, 0, 0.5); !important; } #list_surround { position: absolute !important; left: 1px !important; } body { background-size: cover; } #list_surround { width: 600px !important; } |
Apr 20, 2013 12:25 PM
#886
TheHolyPotato said: It has to do with lag in the server. Whenever it lags you take away one and then you add one I think. Then it doesn't notice you added one and you keep adding them. Thats pretty much the basis of it. that sound logical but when does the server lagg? Or rather how can I notice it? |
Apr 20, 2013 1:13 PM
#887
Kirosanchi said: ok so i know i'm a super noob at this stuff, but i thought i'd try and make one of the requested layouts. specifically the katanagatari one. so far i got this far ![]() but i have a few question. 1) how can i put a background (like a black box which is see through) behind the titles at the very top (watching,ptw, on hold, etc..) 2)add the orange background of list behind the headers for each box (watching, completed, etc....) also open to suggestions. Cool ty, here's the codes you need: .status_selected, .status_not_selected { background: black; } .header_title { background: none repeat scroll 0 0 rgba(255, 120, 0, 0.5); } Suggestions? Pros: Colors are unique, and match background. Cons: Text and font is a bit too small I think. Background choice could be better too imo. I looked it up to see more images of this anime and its the one that comes up on top of Google. I'm not saying you got it that way but I think it'd be better to go with a high quality and unique background found after even a couple minutes searching on Konachan. For a more simple layout you should make the background a special one people will like seeing again and again that also they haven't seen before (hopefully). Not necessary but that'd be my suggestion. |
Apr 20, 2013 10:27 PM
#888
thx alot. no need to say thank you, i'm obviously not good at this, but gonna try my very best. I was gonna change the text and font, kinda kept it till the end to see what works with what pics and colors i choose. i see what your saying about the background. will look into it. i guess i just thought cherry blossoms worked well with that render. thx for everything |
Apr 21, 2013 3:23 PM
#889
whoa thanks guys for explaining all that to me! 8D well.. I am kinda of a noob when it comes to those things.. I knew something was fishy about coding and its relation to this, but I thought its something way advance for me to understand and its actually part of coding etc.. x'D I guess they want to keep their pages unique and different from everyone else? I'm so waiting for next time the system here lags *7* lol |
..{ Nobody is perfect, I'm nobody! ~ ♥ |
Apr 22, 2013 6:47 AM
#890
Hi ^^ I have a question,i just made my profile layout,following Shishio-kun's tutorial,but i don't know how to ad the links for "Friend me" and "Message me" :/ I will be very grateful if you could help me. |
Apr 22, 2013 7:54 AM
#891
DragniMDragnivat said: Hi ^^ I have a question,i just made my profile layout,following Shishio-kun's tutorial,but i don't know how to ad the links for "Friend me" and "Message me" :/ I will be very grateful if you could help me. Should be message http://myanimelist.net/mymessages.php?go=send&toname=DragniMDragnivat fr http://myanimelist.net/myfriends.php?go=add&id=1818571 You have to log out your account to see and copy the link location for these links, or ask a friend to copy the links for you. |
Apr 22, 2013 8:17 AM
#892
Thank you very much ^^ I copied them,and now my layout is completed :) Oh...and just to ask...how can i make a profile layout,whit a window for a you tube video :/ |
deactivated13041Apr 22, 2013 8:39 AM
Apr 22, 2013 6:49 PM
#893
The DVD covers on my anime list aren't showing up. I have a premade layout and added the add-ons correctly, if I'm not mistaken, but they still don't work. Can you help? My Anime List's CSS: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css); /* This is the MATH part of the layout. Don't touch it unless you know what you're doing */ @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css); /* Remove the following line if you don't want to use my top bar redux */ @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); body{ /* Set up a background image: */ background-image: url(http://img812.imageshack.us/img812/4567/medakaboxu.jpg); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /* This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* Background color for hovered row in 'the rest' section * I made it more opaque and a bit gray * You may remove the following 3 lines if you don't want this effect. */ tr:hover [class^='td']{ background-color: rgba(45,45,45,0.9) !important; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png); } /* Block displaying category totals * It's redesigned to be the part of the layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png'); } /* upd 11th March 2012 */ /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ :hover + .hide { background-size: cover; right: 1500px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } |
jjrocks24Apr 22, 2013 7:03 PM
Apr 22, 2013 11:37 PM
#894
2jjrocks24: Find following piece of code and edit marked with red: :hover + .hide { background-size: cover; /* Too wide margin! Covers are shown out of screen. Use 150px, for example */ right: 1500px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } |
Apr 23, 2013 3:02 PM
#895
Hahaido said: 2jjrocks24: Find following piece of code and edit marked with red: :hover + .hide { background-size: cover; /* Too wide margin! Covers are shown out of screen. Use 150px, for example */ right: 1500px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } thanks! |
Apr 24, 2013 4:00 PM
#896
ok, I want to put my category links in my top bar in the form of picture buttons similar to my example, is this possible and if so how do I do it?![]() |
Apr 26, 2013 12:06 PM
#897
I'm currently working on my profile layout. Photobucket automatically has a url to the original picture in the bbcode, but when I try to change the urls to something else, such as my anime list, the whole thing messes up |
Apr 26, 2013 1:40 PM
#898
smokahontas96 said: I'm currently working on my profile layout. Photobucket automatically has a url to the original picture in the bbcode, but when I try to change the urls to something else, such as my anime list, the whole thing messes up [url=http://s1214.photobucket.com/user/Smokahontas96/media/Layout/9_zps0076f6f3.png.html][img]http://i1214.photobucket.com/albums/cc487/Smokahontas96/Layout/9_zps0076f6f3.png[/img][/url] There is a space after this part you need to close, use backspace or delete. |
Apr 26, 2013 1:42 PM
#899
clone4 said: ok, I want to put my category links in my top bar in the form of picture buttons similar to my example, is this possible and if so how do I do it? ![]() Theres a tutorial with the codes for the category links, you just use that then change the background images to the icons you want. Plus you need to reduce the size down to that of the icons, move them to the top bar, give them a transparent background. |
Apr 26, 2013 3:18 PM
#900
DragniMDragnivat said: Thank you very much ^^ I copied them,and now my layout is completed :) Oh...and just to ask...how can i make a profile layout,whit a window for a you tube video :/ You have to put an empty space into your profile graphic that can fit a Youtube player. They are 425px across and 355px high. Then you put the BBcode for the player in the space on your layout and it fits in like a image would. You can see an example in the layout I fixed here: http://myanimelist.net/forum/?topicid=393393&show=20#msg18976260 |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
386 |
by Shishio-kun
»»
7 hours ago |
|
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 |