New
Feb 16, 2015 5:39 AM
#2601
Hi! Im new here and i hope im posting this in the right place, also sorry for my poor english :) So im having a problem... 2 of my anime covers arent showing properly so i used:This Tutorial And one of the covers is fixed but other one is still missing. Any suggestions ? |
Feb 16, 2015 7:32 AM
#2602
Oiomi-chan said: zoropp said: looks like You've gotten your hands on the manga version “〆(^∇゜*)♪For some reason, things like tags and types of anime are broken. Moreover, instead of an episode counting, it keeps showing me a chapter one: ...Do you know what's wrong?Here are the codes: @import "https://dl.dropbox.com/s/b8rj8b3y52e2062/viyafanes.css?dl=0"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.css"; /*#################################################*/ /*#############Change Banner images below##############*/ /*#################################################*/ .header_cw { background: url("http://i58.tinypic.com/2d1lmdh.jpg")!important; } .header_completed { background: url("http://i58.tinypic.com/2d1lmdh.jpg")!important; } .header_onhold { background: url("http://i58.tinypic.com/2d1lmdh.jpg")!important; } .header_dropped { background: url("http://i58.tinypic.com/2d1lmdh.jpg")!important; } .header_ptw { background: url("http://i58.tinypic.com/2d1lmdh.jpg")!important; } /*############Change background image below############*/ body { background-image: url("http://i61.tinypic.com/dggev6.jpg"); } /*#################################################*/ /*#################################################*/ .hide { background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/coverimage.png"); border-radius: 5px; background-size: 100%; border-color: #000000; border-style: solid; border-width: 1px; display: inline-block !important; float: left; height: 265px !important; margin-bottom: 8px; margin-left: -160px; padding-left: 0; position: relative; visibility: visible !important; width: 189px; z-index: 0; box-shadow: 0 0 5px black inset; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: cover !important; font-family: calibri; } a { text-decoration: none; } #list_surround { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; margin: 0 auto auto 30px; padding-top: 242px; position: absolute; width: 1016px; box-shadow: 0 0 4px black; } /*############################COLUMNS#####################*/ td[class^="td"]:nth-of-type(1) { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/star3.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); content: " "; display: inline; font-size: 0; left: 168px; padding: 16px; position: relative !important; top: 248px; } .animetitle { color: #D3D3D3 !important; font-family: century gothic; font-variant: small-caps; left: 25px; max-width: 180px; overflow: hidden; position: absolute; text-align: center; text-decoration: none; text-overflow: ellipsis; text-shadow: 1px 1px 1px #000000, 0 0 4px #000000; top: 213px; white-space: nowrap; } .td1, .td2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding-right: 15px; } .td1 a, .td2 a { color: #FFFFFF; } td[class^="td"]:nth-of-type(2) {} td[class^="td"]:nth-of-type(3) { background: transparent; color: #FFFFE0; display: inline !important; font-family: fantasy; font-size: 22px; left: 169px !important; position: relative; text-align: center !important; text-decoration: none; text-shadow: 0 0 1px #FFD700, 0 0 2px #FFA500; top: 234px !important; width: 30px !important; padding-right: 0px ; } td[class^="td"]:nth-of-type(3) a { color: #FFFFE0 !important; font-family: century gothic; font-size: 22px; text-decoration: none; } td[class^="td"]:nth-of-type(4):before { color: #FFFFFF; content: " Chapter: "; font-style: normal; font-variant: small-caps; font-weight: normal; position: relative; text-shadow: 0 0 0 !important; } td[class^="td"]:nth-of-type(4) { color: lightyellow; font-family: century gothic; font-size: 13px; font-style: italic; font-variant: small-caps; font-weight: bold; margin-left: -90px; position: absolute; text-align: left; top: 232px !important; width: 225px; z-index: 10; } td[class^="td"]:nth-of-type(4) a { color: #FFFFE0; font-family: century gothic; font-style: italic; font-variant: small-caps; font-size: 13px; font-weight: bold; } td[class^="td"]:nth-of-type(5):before { content: "Volume: "; font-weight: normal; font-family: century gothic; font-size: 13px; font-variant: small-caps; color: #FFFFFF; font-style: normal; } td[class^="td"]:nth-of-type(5) a { color: lightyellow; font-size: 13px; font-weight: bold; font-family: century gothic; font-style: italic; } td[class^="td"]:nth-of-type(5) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); border-bottom-style: none !important; border-color: #000000; border-top: 1px solid #000000; border-width: 1px; box-shadow: 0 0px 4px black inset; color: #FFFFE0; font-family: century gothic; font-size: 14px; font-style: italic; font-weight: bold; height: 18px; left: 3px; margin-left: 17px; padding-bottom: 3px; padding-left: 10px; padding-top: 34px; position: absolute; top: 211px; width: 166px; z-index: -1; border-radius: 0px 0px 3px 3px; } td[class^="td"]:nth-of-type(6) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; height: 144px; margin-left: 17px; opacity: 0; padding-left: 12px; padding-top: 70px; position: absolute; text-align: center; top: 0; width: 162px; } td[class^="td"]:nth-of-type(6) a { color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; } td[class^="td"]:nth-of-type(7), td[class^="td"]:nth-of-type(8) { display: none; } /*############################BANNER CELLS######################*/ .header_cw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_completed { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_onhold { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_dropped { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_ptw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } /*#####################EDIT################*/ #list_surround small { background: transparent; font-size: 10; left: 39px; text-decoration: none; top: 20px; } .td1 a.List_LightBox, .td2 a.List_LightBox { color: #808080; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 186px; opacity: 0.8; position: absolute; text-decoration: none; top: 1px; visibility: visible !important; width: 118px; z-index: 2; } #list_surround small a { visibility: hidden; font-size: 40px; } /*### COMMENT ###*/ .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } /*### AIRING ###*/ .animetitle + small { background-color: rgba(0, 0, 0, 0.75) !important; background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/airing.png") !important; background-position: -2px center !important; background-repeat: no-repeat no-repeat !important; background-size: 22px auto !important; border-color: #000000; border-radius: 5px 5px 0 0; border-style: solid; border-width: 1px; box-shadow: 0 2px 3px #808080 inset; color: #FFFFE0; font-family: century gothic; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 30px !important; letter-spacing: 0.3px; opacity: 1; padding: 0 3px 2px 22px; position: absolute; text-align: center; text-shadow: 0 0 3px #FFFFFF, -1px -1px 5px #FFFFFF; top: 192px !important; visibility: visible !important; z-index: 3; border-bottom-style: none; } /*### COPYRIGHT ###*/ #copyright:before { content: 'Design by Lirina. Topbar by Luxiamimi. '; display: block; font-size: 10px; color: lightyellow !important; text-align: right; font-style: normal; } #copyright { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-color: #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-width: 1px; color: #FFFFFF; font-family: Tahoma; font-size: 10px; left: 740px; margin: auto !important; padding: 4px; position: absolute; right: 0; text-align: right !important; top: 206px; width: 265px; z-index: 1 !important; border-radius: 5px 0 ; font-style: italic; } .category_totals { color: white; position: relative; white-space: pre-line; padding: 0 0 0 35px; padding-bottom: 25px; font-size: 14px; font-variant: small-caps; } .category_totals:before { color: lightgray; content: "Totals"; display: block !important; font-size: 25px; text-align: center; font-family: century gothic; font-variant: small-caps; margin-left: -30px; text-shadow: 0 0 2px black; } Read more at http://myanimelist.net/forum/?topicid=1071911&show=20#uUsi70ahei8DBV31.99 #copyright a { color: #FFFFFF; text-decoration: none; } #copyright:before { color: #FFFFFF; } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; text-align: left; top: 63px; width: 225px; } .td1[align="center"][width="50"], .td2[align="center"][width="50"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; left: 4px; position: absolute; text-align: left; top: 82px; width: 225px; } .td1[width="70"], .td2[width="70"] { text-align: left; } /* td:nth-of-type(7) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; position: absolute !important; top: 120px !important; } td:nth-of-type(8) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #FFFFFF !important; left: 4px; position: absolute; text-align: left; top: 139px; width: 225px; } td:nth-of-type(5) { font-size: 0; } */ .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } .td1[align="center"][width="45"]:before, .td2[align="center"][width="45"]:before { } .td1[align="center"][width="50"]:before, .td2[align="center"][width="50"]:before { color: #FFFFFF; content: " Type: "; font-style: italic; font-variant: small-caps; font-weight: normal; position: relative; } .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; font-family: Verdana; font-size: 11px; text-decoration: none; } I would have said the same if it wasn't for the currently watching part in the up center. |
Feb 16, 2015 11:33 AM
#2603
Afyr0 said: Hi! Im new here and i hope im posting this in the right place, also sorry for my poor english :) So im having a problem... 2 of my anime covers arent showing properly so i used:This Tutorial And one of the covers is fixed but other one is still missing. Any suggestions ? If you go check this import: http://dl.dropbox.com/u/49469857/MAL/premade/anime.css You will notice that the picture you are missing are already there. However, they are 404'd. You added your own import to fix it, but you didn't add it after the first import. In css, the last line takes priority, so it's still trying to use the dead links. To fix it just put your import after the list's import, like this: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; |
Feb 16, 2015 12:46 PM
#2604
Satiriques said: Afyr0 said: Hi! Im new here and i hope im posting this in the right place, also sorry for my poor english :) So im having a problem... 2 of my anime covers arent showing properly so i used:This Tutorial And one of the covers is fixed but other one is still missing. Any suggestions ? If you go check this import: http://dl.dropbox.com/u/49469857/MAL/premade/anime.css You will notice that the picture you are missing are already there. However, they are 404'd. You added your own import to fix it, but you didn't add it after the first import. In css, the last line takes priority, so it's still trying to use the dead links. To fix it just put your import after the list's import, like this: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; Wait, i dont quite know what to do (im a total noob), i need to first put @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); on top and then @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; ? |
Feb 16, 2015 12:58 PM
#2605
Afyr0 said: Satiriques said: Afyr0 said: Hi! Im new here and i hope im posting this in the right place, also sorry for my poor english :) So im having a problem... 2 of my anime covers arent showing properly so i used:This Tutorial And one of the covers is fixed but other one is still missing. Any suggestions ? If you go check this import: http://dl.dropbox.com/u/49469857/MAL/premade/anime.css You will notice that the picture you are missing are already there. However, they are 404'd. You added your own import to fix it, but you didn't add it after the first import. In css, the last line takes priority, so it's still trying to use the dead links. To fix it just put your import after the list's import, like this: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; Wait, i dont quite know what to do (im a total noob), i need to first put @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); on top and then @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; ? Here's the complete code: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/seasons.jpg);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: rgb(39, 255, 195);} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ |
Feb 16, 2015 1:15 PM
#2606
Satiriques said: Afyr0 said: Satiriques said: Afyr0 said: Hi! Im new here and i hope im posting this in the right place, also sorry for my poor english :) So im having a problem... 2 of my anime covers arent showing properly so i used:This Tutorial And one of the covers is fixed but other one is still missing. Any suggestions ? If you go check this import: http://dl.dropbox.com/u/49469857/MAL/premade/anime.css You will notice that the picture you are missing are already there. However, they are 404'd. You added your own import to fix it, but you didn't add it after the first import. In css, the last line takes priority, so it's still trying to use the dead links. To fix it just put your import after the list's import, like this: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; Wait, i dont quite know what to do (im a total noob), i need to first put @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); on top and then @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; ? Here's the complete code: @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "https://dl.dropboxusercontent.com/s/8igh43zzzqf8fug/covers.css?dl=0"; /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/seasons.jpg);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: rgb(39, 255, 195);} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ Thank you, i really appreciate it :) |
Feb 18, 2015 2:05 PM
#2607
xXFearTheGuestX said: Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it. http://myanimelist.net/animelist/lez_derp I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out. Please and Thank You Hey Guys I posted this over a week ago, if know one wants to help cool whatever, but could you at least point me in the direction I need to go? it would be dually appreciated. thanks |
Feb 18, 2015 2:39 PM
#2608
xXFearTheGuestX said: well the thing is that if I am not going to give you a complete tutorial, the only thing I can do is to say rip the code. But I won't that because ripping code is bad manners. So I am not sure of how to help. What I can say is that the pics use .animetitle:before, a set size and border radius of half a sides length.xXFearTheGuestX said: Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it. http://myanimelist.net/animelist/lez_derp I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out. Please and Thank You Hey Guys I posted this over a week ago, if know one wants to help cool whatever, but could you at least point me in the direction I need to go? it would be dually appreciated. thanks |
Feb 18, 2015 5:06 PM
#2609
xXFearTheGuestX said: xXFearTheGuestX said: Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it. http://myanimelist.net/animelist/lez_derp I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out. Please and Thank You Hey Guys I posted this over a week ago, if know one wants to help cool whatever, but could you at least point me in the direction I need to go? it would be dually appreciated. thanks Its not that no one wants to help you, its that everyone is super busy this time of year and sometimes questions get lost in the pile- and what you're asking is complicated for the reasons Oiomi brought up. Since Lez_derp didn't answer you or give permission to use his work, we don't know how he feels about you using his layout and we don't want to disrespect him as he made his own layout from nothing probably. However I can't stop you from eventually figuring out how to rip his CSS or someone else giving it to you. I'd like to avoid anyone from weighing on his bandwidth so you can get his basic CSS from here (I ripped it for you): http://pastebin.com/UxTuCAvG You have to host it in your own Dropbox tho and import it to your list, use this tutorial. You need to do this cuz the codes probably can't be simply pasted to the CSS edit box and must be imported to work. You'll have to make your own CSS file (explained bottom of the topic), and paste the codes from the pastebin into it. Then you upload that to Dropbox as instructed in the tutorial. http://myanimelist.net/forum/?topicid=411779 To get the covers, you also have to make your own anime:before cover CSS with Blink! and also host that on Dropbox (topic tells you how): http://myanimelist.net/forum/?topicid=1174347 You can also just use the import from step one in this topic, its the same type of cover CSS, but it's not guaranteed to have all your covers (but if you make your own it will): http://myanimelist.net/forum/?topicid=699861 You can edit the file you upload to change the topbar color. You should also leave his username in the copyright too, of course. If you have questions about different parts of the whole process you can ask about it and bump your post when its not answered right away. |
Feb 18, 2015 8:15 PM
#2610
Shishio-kun said: xXFearTheGuestX said: xXFearTheGuestX said: Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it. http://myanimelist.net/animelist/lez_derp I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out. Please and Thank You Hey Guys I posted this over a week ago, if know one wants to help cool whatever, but could you at least point me in the direction I need to go? it would be dually appreciated. thanks Its not that no one wants to help you, its that everyone is super busy this time of year and sometimes questions get lost in the pile- and what you're asking is complicated for the reasons Oiomi brought up. Since Lez_derp didn't answer you or give permission to use his work, we don't know how he feels about you using his layout and we don't want to disrespect him as he made his own layout from nothing probably. However I can't stop you from eventually figuring out how to rip his CSS or someone else giving it to you. I'd like to avoid anyone from weighing on his bandwidth so you can get his basic CSS from here (I ripped it for you): http://pastebin.com/UxTuCAvG You have to host it in your own Dropbox tho and import it to your list, use this tutorial. You need to do this cuz the codes probably can't be simply pasted to the CSS edit box and must be imported to work. You'll have to make your own CSS file (explained bottom of the topic), and paste the codes from the pastebin into it. Then you upload that to Dropbox as instructed in the tutorial. http://myanimelist.net/forum/?topicid=411779 To get the covers, you also have to make your own anime:before cover CSS with Blink! and also host that on Dropbox (topic tells you how): http://myanimelist.net/forum/?topicid=1174347 You can also just use the import from step one in this topic, its the same type of cover CSS, but it's not guaranteed to have all your covers (but if you make your own it will): http://myanimelist.net/forum/?topicid=699861 You can edit the file you upload to change the topbar color. You should also leave his username in the copyright too, of course. If you have questions about different parts of the whole process you can ask about it and bump your post when its not answered right away. Thank you so much for the reply, I wasn't trying to step on any ones toes and I'm sorry if thats how I came off. Not trying to steal anything from any one |
Feb 18, 2015 8:17 PM
#2611
Oiomi-chan said: xXFearTheGuestX said: well the thing is that if I am not going to give you a complete tutorial, the only thing I can do is to say rip the code. But I won't that because ripping code is bad manners. So I am not sure of how to help. What I can say is that the pics use .animetitle:before, a set size and border radius of half a sides length.xXFearTheGuestX said: Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it. http://myanimelist.net/animelist/lez_derp I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out. Please and Thank You Hey Guys I posted this over a week ago, if know one wants to help cool whatever, but could you at least point me in the direction I need to go? it would be dually appreciated. thanks Thank you I really appreciate your response, I can see you all do so much for the community especially for a noob like me |
Feb 19, 2015 4:23 AM
#2612
xXFearTheGuestX said: Shishio-kun said: xXFearTheGuestX said: xXFearTheGuestX said: Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it. http://myanimelist.net/animelist/lez_derp I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out. Please and Thank You Hey Guys I posted this over a week ago, if know one wants to help cool whatever, but could you at least point me in the direction I need to go? it would be dually appreciated. thanks Its not that no one wants to help you, its that everyone is super busy this time of year and sometimes questions get lost in the pile- and what you're asking is complicated for the reasons Oiomi brought up. Since Lez_derp didn't answer you or give permission to use his work, we don't know how he feels about you using his layout and we don't want to disrespect him as he made his own layout from nothing probably. However I can't stop you from eventually figuring out how to rip his CSS or someone else giving it to you. I'd like to avoid anyone from weighing on his bandwidth so you can get his basic CSS from here (I ripped it for you): http://pastebin.com/UxTuCAvG You have to host it in your own Dropbox tho and import it to your list, use this tutorial. You need to do this cuz the codes probably can't be simply pasted to the CSS edit box and must be imported to work. You'll have to make your own CSS file (explained bottom of the topic), and paste the codes from the pastebin into it. Then you upload that to Dropbox as instructed in the tutorial. http://myanimelist.net/forum/?topicid=411779 To get the covers, you also have to make your own anime:before cover CSS with Blink! and also host that on Dropbox (topic tells you how): http://myanimelist.net/forum/?topicid=1174347 You can also just use the import from step one in this topic, its the same type of cover CSS, but it's not guaranteed to have all your covers (but if you make your own it will): http://myanimelist.net/forum/?topicid=699861 You can edit the file you upload to change the topbar color. You should also leave his username in the copyright too, of course. If you have questions about different parts of the whole process you can ask about it and bump your post when its not answered right away. Thank you so much for the reply, I wasn't trying to step on any ones toes and I'm sorry if thats how I came off. Not trying to steal anything from any one Don't worry about seeming like a thief, it doesn't come off that way. imo I think its fine as long as you- don't take credit for others work, leave their name in the copyright credits, don't steal their bandwidth, and tried to contact the original maker for permission. If they really don't want you using it they will respond. |
Feb 19, 2015 8:48 AM
#2613
How do I use "#list_surround" the 2nd time. I have it used it once for a banner on the top of my list but now I want to use it again for something similar on the bottom. If I copy my code but just replace "background-position: right top;" with "background-position: right bottom;" Only the 2nd one shows up because it overrides the first one. |
Feb 19, 2015 8:55 AM
#2614
Feb 19, 2015 9:58 AM
#2615
Hahaido said: You can use pseudo-elements #list_surround:before { position: absolute; display: block; content: ''; left: ; top: ; width: ; height: ; background: ; } #list_surround:after { position: absolute; display: block; content: ''; left: ; top: ; width: ; height: ; background: ; } I'm super noob at css :/ How do I turn this: #list_surround { background-image: url(http://i.imgur.com/bR9uvZx.png); background-position: right top; background-repeat: no-repeat; padding-top: 228px; } #list_surround { background-image: url(http://i.imgur.com/sovnk01.png); background-position: right bottom; background-repeat: no-repeat; padding-bottom: 236px; } in to that? |
Feb 19, 2015 10:16 AM
#2616
Try this #list_surround { padding: 228px 0 236px; background-image: url(http://i.imgur.com/bR9uvZx.png), url(http://i.imgur.com/sovnk01.png); background-position: right top, right bottom; background-repeat: no-repeat; } |
Feb 19, 2015 10:27 AM
#2617
Hahaido said: Try this #list_surround { padding: 228px 0 236px; background-image: url(http://i.imgur.com/bR9uvZx.png), url(http://i.imgur.com/sovnk01.png); background-position: right top, right bottom; background-repeat: no-repeat; } THANKS! :D It worked! |
Feb 21, 2015 2:57 PM
#2618
I want to modify the color of the font of the anime titles from only the .td2 selector, how can I do that? For exemple, I'd like having the anime title of the .td1 black, and .td2 white. |
Feb 21, 2015 3:35 PM
#2619
Feb 21, 2015 3:47 PM
#2620
Oiomi-chan said: Satiriques said: I want to modify the color of the font of the anime titles from only the .td2 selector, how can I do that? For exemple, I'd like having the anime title of the .td1 black, and .td2 white. .td2 .animetitle { color:black; } Thanks, I did that without spaces and it wasn't working. Why is a space needed in this case? |
Feb 21, 2015 4:21 PM
#2621
Satiriques said: because a selector doesn't really have any length limits and therefore you need something to divide it. This selector selects all .animetitle selectors that are children of a .td2 parent and therefore it is made out of two different selectors. http://www.w3schools.com/cssref/css_selectors.aspOiomi-chan said: Satiriques said: I want to modify the color of the font of the anime titles from only the .td2 selector, how can I do that? For exemple, I'd like having the anime title of the .td1 black, and .td2 white. .td2 .animetitle { color:black; } Thanks, I did that without spaces and it wasn't working. Why is a space needed in this case? |
Feb 23, 2015 4:51 PM
#2622
I'm slowly trying to make my own page and I'm trying to add a sliding menu on the side. The only problem is that I don't know how to make my page just show one section of my list by default. For instance if you would look at my anime page it just show what I am watching, or it would just show what I have completed. I'm not the best at css so I've been taking bits of other code then just altering them a bit. That is why I looks like a cluster right now and also because I'm not finished yet. Thank you in advanced if anyone can comment and help. |
Feb 23, 2015 6:42 PM
#2623
I'm not quite sure to understand what you mean. The only problem is that I don't know how to make my page just show one section of my list by default. For instance if you would look at my anime page it just show what I am watching, or it would just show what I have completed. So do you want your list to only show one section, or all five of them? |
Feb 26, 2015 10:50 PM
#2624
I don't know if this has been asked before but I'll try asking. I'm new at using Photoshop CC and I wanted to learn how to create good renders that can be used for images. If anyone can help, than thank you very much. I want to be able to create a render that is not choppy or unprofessional like. |
Feb 27, 2015 10:23 AM
#2625
GENBrian said: I don't know if this has been asked before but I'll try asking. I'm new at using Photoshop CC and I wanted to learn how to create good renders that can be used for images. If anyone can help, than thank you very much. I want to be able to create a render that is not choppy or unprofessional like. There's a tutorial in this thread. |
Feb 28, 2015 12:52 PM
#2626
I was trying to add the hover-display to my list's anime/manga covers.. but for some reason every time i click 'Update CSS' after pasting the code i always get this error page (http://i.imgur.com/i9aYYHW.png) . idk .. is it because the code is very long ? how can i fix that ? |
Feb 28, 2015 10:00 PM
#2627
AmMar-Sama said: I was trying to add the hover-display to my list's anime/manga covers.. but for some reason every time i click 'Update CSS' after pasting the code i always get this error page (http://i.imgur.com/i9aYYHW.png) . idk .. is it because the code is very long ? how can i fix that ? Well I never seen that error so idk- are you adding the entire list of covers or just the few lines? You only need to add a few lines of CSS to your code in the end. Also what topic are you using. |
Mar 1, 2015 4:25 AM
#2628
Shishio-kun said: AmMar-Sama said: I was trying to add the hover-display to my list's anime/manga covers.. but for some reason every time i click 'Update CSS' after pasting the code i always get this error page (http://i.imgur.com/i9aYYHW.png) . idk .. is it because the code is very long ? how can i fix that ? Well I never seen that error so idk- are you adding the entire list of covers or just the few lines? You only need to add a few lines of CSS to your code in the end. Also what topic are you using. I used the code from this topic [ http://myanimelist.net/forum/?topicid=563993 ]. And yes.. i tried to add the whole thing to the top of my CSS code. (in that topic it says to add it in the top, not in the end). I figured that would be more convenient so that I won't need to add a line every single time I add an anime to my list ;-; If i was supposed to choose only the lines i need .. how do i do that ? I mean .. the code contains thousands of lines ... and they don't seem to have a particular order so it's a bit difficult .. |
Mar 1, 2015 5:47 AM
#2629
AmMar-Sama said: Shishio-kun said: AmMar-Sama said: I was trying to add the hover-display to my list's anime/manga covers.. but for some reason every time i click 'Update CSS' after pasting the code i always get this error page (http://i.imgur.com/i9aYYHW.png) . idk .. is it because the code is very long ? how can i fix that ? Well I never seen that error so idk- are you adding the entire list of covers or just the few lines? You only need to add a few lines of CSS to your code in the end. Also what topic are you using. I used the code from this topic [ http://myanimelist.net/forum/?topicid=563993 ]. And yes.. i tried to add the whole thing to the top of my CSS code. (in that topic it says to add it in the top, not in the end). I figured that would be more convenient so that I won't need to add a line every single time I add an anime to my list ;-; If i was supposed to choose only the lines i need .. how do i do that ? I mean .. the code contains thousands of lines ... and they don't seem to have a particular order so it's a bit difficult .. "In the end"- what I meant by that after all is done, you usually only need to add a few lines of code to your CSS to get covers with most of the set ups, I wasn't talking about the end of the list codes, rather the end of the process. In step one, you don't click the link after @import and manually add all those lines to your CSS. As it says in the instructions, only add one of the lines with @import (depending on if its going to your anime list or manga) to the top of your CSS . So your anime list layout CSS would look like this after: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "https://dl.dropboxusercontent.com/s/5k8vosz8ho7rmiy/malanime.css"; body { background-attachment: fixed ! important; background-color: #f0f0f0 ! important; background-image: url("http://i.imgur.com/LvvaNSQ.png") ! important; background-repeat: repeat-x ! important; } :nth-child(5) .header_title { background: url("http://i.imgur.com/ZGgzAmt.png") no-repeat scroll center center / 100% 100% rgba(255, 255, 255, 0); } :nth-child(5) .header_title:before { content: "Anime List"; } Notice I put the line from step 1 at the top (I put it in bold). Just do that, then follow instructions in steps 2 and 3 perfectly and it should go fine. In step 2 you click a link and add codes from the page it takes you to your CSS (bottom). And step 3 you pick a style and add the codes from the spoiler to your CSS bottom as well. You don't ever need to view all those thousands of lines from step 1 to add covers. They're all contained within that one line in step 1 for convenience. Hope that makes everything clear, if not post back |
Shishio-kunMar 1, 2015 5:51 AM
Mar 1, 2015 10:50 AM
#2630
Shishio-kun said: AmMar-Sama said: Shishio-kun said: AmMar-Sama said: I was trying to add the hover-display to my list's anime/manga covers.. but for some reason every time i click 'Update CSS' after pasting the code i always get this error page (http://i.imgur.com/i9aYYHW.png) . idk .. is it because the code is very long ? how can i fix that ? Well I never seen that error so idk- are you adding the entire list of covers or just the few lines? You only need to add a few lines of CSS to your code in the end. Also what topic are you using. I used the code from this topic [ http://myanimelist.net/forum/?topicid=563993 ]. And yes.. i tried to add the whole thing to the top of my CSS code. (in that topic it says to add it in the top, not in the end). I figured that would be more convenient so that I won't need to add a line every single time I add an anime to my list ;-; If i was supposed to choose only the lines i need .. how do i do that ? I mean .. the code contains thousands of lines ... and they don't seem to have a particular order so it's a bit difficult .. "In the end"- what I meant by that after all is done, you usually only need to add a few lines of code to your CSS to get covers with most of the set ups, I wasn't talking about the end of the list codes, rather the end of the process. In step one, you don't click the link after @import and manually add all those lines to your CSS. As it says in the instructions, only add one of the lines with @import (depending on if its going to your anime list or manga) to the top of your CSS . So your anime list layout CSS would look like this after: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "https://dl.dropboxusercontent.com/s/5k8vosz8ho7rmiy/malanime.css"; body { background-attachment: fixed ! important; background-color: #f0f0f0 ! important; background-image: url("http://i.imgur.com/LvvaNSQ.png") ! important; background-repeat: repeat-x ! important; } :nth-child(5) .header_title { background: url("http://i.imgur.com/ZGgzAmt.png") no-repeat scroll center center / 100% 100% rgba(255, 255, 255, 0); } :nth-child(5) .header_title:before { content: "Anime List"; } Notice I put the line from step 1 at the top (I put it in bold). Just do that, then follow instructions in steps 2 and 3 perfectly and it should go fine. In step 2 you click a link and add codes from the page it takes you to your CSS (bottom). And step 3 you pick a style and add the codes from the spoiler to your CSS bottom as well. You don't ever need to view all those thousands of lines from step 1 to add covers. They're all contained within that one line in step 1 for convenience. Hope that makes everything clear, if not post back It worked. Thanks! =) |
Mar 1, 2015 3:58 PM
#2631
I need a style layout where whatever i've written in the comment field pops up on hover. Also hopefully with a space for a disclaimer. Hopefully not devoted to any specific anime. Alternatively, if you can explain how do i do that in css, i'm down for it as well. |
All aboard the delusion train. |
Mar 3, 2015 5:32 AM
#2632
Mar 3, 2015 6:07 AM
#2633
KLKfanboy said: how do I make my list scale to the viewer's desktop? I modified another user's myanimelist to my theme (with his consent!) and I absolutely love the way it looks, but it seems not to work with different resolutions. Mother of God Read this, it's pretty much self-explanatory : https://css-tricks.com/viewport-sized-typography/ |
Mar 3, 2015 6:35 AM
#2634
Mar 3, 2015 7:37 AM
#2635
KLKfanboy said: naah, that's too much hassle and not what I meant i simply wanted to know how to scale the background XD i can't into this CSS thingy at all background-size: cover; |
Mar 3, 2015 8:01 AM
#2636
Mar 3, 2015 9:10 AM
#2637
KLKfanboy said: Where do I put it? I tried few places but my background just goes blank https://2417bc822d5a1a1c0611cf272de2c2bba8f1ceda.googledrive.com/host/0Bwdzx21-2YyneGJMUldmUVljSVk/test.css Next time, make sure you organise your list like I did for the body part, makes helping a lot easier. I also changed your wallpaper so it doesn't cut at the feet. body{ color:#000; font-size:11px; font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif; line-height:1; background:url(http://i.imgur.com/4S6UcX9.png) right -225px bottom no-repeat fixed #c4b8ad; background-size:cover; } (you can put the background-color the same color as the wallpaper and move it around if you wanted Ryuuko to be more centered in the remaining area. You might want to change the right -XXXpx part, because I did this for 1920x1080) |
SatiriquesMar 3, 2015 9:40 AM
Mar 3, 2015 9:50 AM
#2638
Mar 3, 2015 11:33 AM
#2639
Mar 3, 2015 12:58 PM
#2640
Is there a way to make it so the scrollbar is always visible or to hide it all together? I tried using html {overflow-y: scroll;} but it doesn't work. |
Mar 4, 2015 4:09 PM
#2641
Not sure where to post this Can anyone help me with this? I designed the list on my desktop which is a higher resolution than my laptop. so when i check my list on my laptop the anime title text doesnt always fit on one line. how do I make it not display the text under the cover icons? CSS skill rank: Beginner -->IMAGE<-- -->CODE<-- sorry if the code is redundant or sloppy, im really new to css so its kinda a frankenstien list i put together of parts of codes from lists i liked and tweaked them slightly. @import url(https://googledrive.com/host/0Bw3_FLYxXV1AcGEySXJRWnE2ZkE); body { background-image: url(http://i.imgur.com/hbgssr0.jpg); background-attachment: fixed; } .header_title { background-color:transparent; color:black; font-family:arial; font-size:30px; text-align: center; vertical-align: bottom; } .table_header { background-color:#6C91AE; color:black; font-family:arial; font-weight:light; font-size:15px; } .animetitle, .animetitle:visited { color:black; font-family:arial; font-weight:light; font-size:15px; padding-left:20%; margin-right:5%x; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:black; font-family:arial; font-size:12; font-weight:light; } #list_surround { width:70%; position: absolute !important; margin: auto !important; right: 0px !important; left: 0px !important;} } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: transparent; } #grand_totals { background-color: rgba(143, 195, 209, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #FFFFFF; line-height: 20px; min-height: 20px; font-weight: light; padding: 55px; text-align: right; vertical-align: middle; } body{ background-position: center } body { font-weight: light; background-repeat: no-repeat; background-color: #6C91AE; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color: rgba(147, 192, 213,0.6); text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:#6C91AE; border-width:0; padding:2px; } .status_selected { background-color:transparent; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:transparent; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:arial; font-size:12px; } .header_title { height:50px; padding:2px; } .table_header { border-width:0; font-weight:light; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } tr:hover [class^=td] { -moz-transition: .2s linear; -webkit-transition: .2s linear; -o-transition: .2s linear; } .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 140px; } .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(89, 155, 187, 0.4); color: #000000; display: block !important; font-weight: light; padding: 8px; } .status_selected a { background-color: rgba(165, 199, 84, 0.4); } .status_not_selected a:hover { background-color: rgba(143, 195, 209, 0.6); } .status_selected a:hover { background-color: rgba(143, 195, 209, 0.6); } tr:hover [class^="td"] { background-color: rgba(142, 192, 213, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { } .td1 { height: 140px; padding: 2px; background-color: rgba(143, 195, 209, 0.3); } .td2 { height: 140px; padding: 2px; background-color: rgba(143, 195, 209, 0.2); } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 40px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; transition: all 0.4s ease 0s; width: 100px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-right: 42px !important; top: 20px !important; width: 202px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: rgba(255,255,255,0.5); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; transition: opacity 0.4s ease-in-out 0s; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #f1a804 !important; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px !important; display: block; font: 13px/17px 'Arial',sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: rgba(255, 255, 255, 0.5) !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.5) !important; border: medium none; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px #f1a804; border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; transition: all 0.25s ease-in-out 0s; width: 0; } #mal_cs_powered a img:hover { background-color: rgba(12, 46, 196, 0.3); } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://i41.tinypic.com/2mgjxpg.png"); right: 178px; background-color: transparent; } #mal_cs_listinfo:hover { background-image: url("http://i39.tinypic.com/15g2sqt.png"); background-color: transparent; } #mal_cs_listinfo:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_listinfo:hover:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 200px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_links { background-image: url("http://i43.tinypic.com/anfomg.png"); right: 122px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i42.tinypic.com/mtwf45.png"); } #mal_cs_links:before { content: ""; position: fixed !important; top: -0px !Important; right: 105px !Important; height: 20px !important; width: 70px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_otherlinks { background-image: url("http://i42.tinypic.com/nbciyp.png"); right: 66px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/s59tesO.pnghttp://i.imgur.com/fGTjBC3.png"); } #mal_cs_otherlinks:before { content: ""; position: fixed !important; top: -0px !Important; right: 55px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_powered { background-image: url("http://i41.tinypic.com/2q9c8p0.png"); position: fixed !important; right: 10px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i40.tinypic.com/nnutt1.png"); } #mal_cs_powered:before { content: ""; position: fixed !important; top: -0px !Important; right: 0px !Important; height: 20px !important; width: 55px !important; background-color: transparent; z-index: -10 !important; } # { background: url("http://i38.tinypic.com/2j4ojlt.png") repeat scroll 0 0 transparent !important; position: fixed; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #{ height: 24px !important; } .hide { height:120px; width:83px; margin-left:5%; margin-top:-130px; background-color:rgba(80, 180, 209, 0.7); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; display:inline-block !important; position: absolute; } .hide:hover { margin-left:150px; padding-right:225px; padding-top:324px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; box-shadow:rgba(80, 181, 209, 0.55) 0 0 8px 8px; position:absolute; z-index:1; } .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } #copyright:after { content: " Css by GreeseMonkie, Inspiration from Shishio-Kun, Kyouhansha, Veriti, TheFallenGlory, and Kiokuzoku. Google 'Shishio's Custom Lists' for premade Lists and Css tutorials."; } I just learned recently how to color text, Its soooo cool! <3 <3 Thank you for the help! <3 <3 |
Mar 4, 2015 7:29 PM
#2642
Mar 4, 2015 9:21 PM
#2643
KawaiiCute said: I have a question I have on my list covers, but they wont go to center (only stay at the left side of the screen) does anyone know how to get it to the center? Use the notes in the code for repositioning covers. It specifically says how. If that doesn't work then post back, but it works in preview. Also you can't use background links from Konachan, use a site like Imgur for uploading and linking wallpapers |
Mar 5, 2015 2:33 AM
#2644
Shishio-kun said: KawaiiCute said: I have a question I have on my list covers, but they wont go to center (only stay at the left side of the screen) does anyone know how to get it to the center? Use the notes in the code for repositioning covers. It specifically says how. If that doesn't work then post back, but it works in preview. Also you can't use background links from Konachan, use a site like Imgur for uploading and linking wallpapers Thanks on the background tip :D The shuffle is still not working for some reason The code I use: /* SHUFFLE STYLE COVERS The first box shadow is the lighting around the covers. The first margin left/top and padding right/top below are the default position of the covers. */ .animetitle:before { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px; box-shadow: 0px 0px 8px 8px rgba(63, 52, 60, 0.55); content: ""; position: absolute; z-index: 1; } .animetitle:before { margin-left: -220px; margin-top: -5px; padding-right: 150px; padding-top: 220px ! important; } /* SETTINGS FOR SPACE WHERE COVERS LEAVE You want the padding and margin to match the settings in the before section above so that when you hover over the covers themselves, they don't flicker. */ .animetitle:after { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px; content: ""; left: 30px ! important; margin-top: -5px; padding-right: 150px; padding-top: 220px ! important; position: absolute; z-index: 1; } /* ON HOVER SETTINGS First keyframes are animation settings for Firefox, webkit for Chrome. The margin left in the lines 0% and 5% should be same as the ones under "shuffle style covers" above. The RGBA colors for the 5%, 8%, and 100% lines will be the color around the covers on hover. The margin left after 8% and 100% will be where the covers move to on hover after a second. You can set the margin left after 0% or 5% to the amount too if you want it to move with no delay. */ @keyframes cover { 0% { box-shadow: rgba(0, 0, 0, 0); margin-left: -220px;} 5% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: -220px;} 8% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} 100% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} } @-webkit-keyframes cover { 0% { box-shadow: rgba(0, 0, 0, 0); margin-left: -220px;} 5% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: -220px;} 8% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} 100% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} } #list_surround:nth-of-type(n+4) tbody:hover .animetitle:before{ background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px; content: ""; margin-left: 400px; margin-top: -5px; padding-right: 150px; padding-top: 220px ! important; position: absolute; z-index: 1; box-shadow: 0px 0px 8px 8px rgba(200, 200, 200, 0.85); animation: cover 12s linear; -webkit-animation: cover 4s linear; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } |
Mar 6, 2015 7:48 AM
#2645
How do you know what type of background is good for a render? Like I have a Ginti render but I don't know what background he would work on. There is no bar backgrounds that i can use |
Mar 6, 2015 8:20 AM
#2646
Is there a quick way to change this list? [spoiler] I absolutely love this style,the side buttons,the headers everythign is great but the only thing I dont like are the dvd covers.I would like to get a normal list style like this one : first code : /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://i.imgur.com/G5WpY72.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url() no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list table itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* MAGICA LOGO Background-image is the Magica logo at page top. You can move it with background position. */ #list_surround { background-attachment:scroll; background-color:transparent; background-image: url(http://i.imgur.com/Hv5dW9P.png); background-position: -50px -40px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i.imgur.com/ojkU8rm.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/4wWEuxL.png); background-position:100% 0; 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-image:url(http://i.imgur.com/LzttEaG.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/iqoaVc2.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/h4KC6ei.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/g0BYNOB.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; 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:10px; } .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(255, 255, 255, 0.4); 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:transparent; border:0 none; 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(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 { } .hide { background-color:rgba(248, 162, 200, 0.701961); 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:7px; 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(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; 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; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } Read more at http://myanimelist.net/forum/?topicid=606489#3MhsyAH5RmtHEvLD.99 second code : @import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimport.css"; /*thin top bar*/ @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Tangerine"); @import url("http://fonts.googleapis.com/css?family=Lemon"); @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Handlee); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i1232.photobucket.com/albums/ff367/coolspot21/Konachancom-133052black_hairblack_rock_shooterguninsane_black_rock_shooterkuroi_matolong_hairshortsswordweapon_zps062bdd70.jpg); background-attachment: fixed; background-size: cover; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color: rgba(14, 18, 29, 0.450); color: #FFFFFF; font-family: 'Handlee', cursive; font-size:20px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: center; text-shadow: 3px -1px 5px #0C0C0C; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: rgba(14, 18, 29, 0.450); } /* 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: "Nova Slim"; font-size:14px; text-shadow: 4px -1px 5px #0C0C0C; } .animetitle + small { color:#B6B6C5; font-family: "Nova Slim"; 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:white; font-size:13px; font-family: "Nova Slim"; text-shadow: 4px -1px 5px #0C0C0C; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: -25px auto 0; width:950px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: relative; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#A6A6C7; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(14, 18, 29, 0.500); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(14, 18, 29, 0.700); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } Read more at http://myanimelist.net/forum/?topicid=393503&show=40#0X5BcDCTe6MVyi7s.99 I hope my question is clear,my english isnt that good :x |
CoLd_J0kerMar 6, 2015 11:30 AM
Mar 6, 2015 10:45 AM
#2647
Hello Im new to HTML coding, cut to the chase, I'm trying to create a blog by using a pre-made template. However it is suppose to look like this: but mines is like this: The code: http://speedy.sh/QVmZp/program-code.txt Where in the code do I have to change to correct this? |
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Mar 6, 2015 12:17 PM
#2648
GENBrian said: How do you know what type of background is good for a render? Like I have a Ginti render but I don't know what background he would work on. There is no bar backgrounds that i can use Its hard to know, expect that if say a render is brightly it it will probably work better for a well lit beach or something. A glowing or darker render will look better in a dark setting, say beach at night. And a render that is of, say, a samurai, won't make sense in a modern day high school. So things like that narrow down your choices. And I'll give you a cool tip Hahaido gave me. A character can actually work for many more backgrounds than you'd think. Like it doesn't always have to be a background the character would normally be in. You can try to make custom scenarios with a render and uncommon backdrop. Like notice on card G Miku is against a sky/plains backdrop: http://myanimelist.net/forum/?topicid=589967 She probably came from a techno backdrop before being rendered but she matches the sky one too and the effects help. You'll see similar things in the other cards of Hahaidos in that topic. Also here, if you look in the Makise and Lucy cards, these were renders, but I put them in backdrops that I felt made cool scenarios. Makise is welcoming someone home in a bunnysuit in a huge mansion and Lucy is up against usual kirakira-type sparkly anime background: http://myanimelist.net/forum/?topicid=1311119 All I had to do was add a few sparkles and minimal lighting effects and it worked out nicely for those two. So you can look for similar backdrops to make cool scenarios for renders you have. Adding effects can help merge them together even better so they don't conflict. What I would do is make a folder with all the backgrounds and then sample the render against them. An idea may come to mind. I have a whole folder for this thing and the sources in this group helped alot. |
Mar 6, 2015 12:25 PM
#2649
Thank you so much for helping Shishio. I kind of get it now. Just experiment until you think it looks good. |
Mar 6, 2015 12:38 PM
#2650
KawaiiCute said: Shishio-kun said: KawaiiCute said: I have a question I have on my list covers, but they wont go to center (only stay at the left side of the screen) does anyone know how to get it to the center? Use the notes in the code for repositioning covers. It specifically says how. If that doesn't work then post back, but it works in preview. Also you can't use background links from Konachan, use a site like Imgur for uploading and linking wallpapers Thanks on the background tip :D The shuffle is still not working for some reason The code I use: /* SHUFFLE STYLE COVERS The first box shadow is the lighting around the covers. The first margin left/top and padding right/top below are the default position of the covers. */ .animetitle:before { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px; box-shadow: 0px 0px 8px 8px rgba(63, 52, 60, 0.55); content: ""; position: absolute; z-index: 1; } .animetitle:before { margin-left: -220px; margin-top: -5px; padding-right: 150px; padding-top: 220px ! important; } /* SETTINGS FOR SPACE WHERE COVERS LEAVE You want the padding and margin to match the settings in the before section above so that when you hover over the covers themselves, they don't flicker. */ .animetitle:after { background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px; content: ""; left: 30px ! important; margin-top: -5px; padding-right: 150px; padding-top: 220px ! important; position: absolute; z-index: 1; } /* ON HOVER SETTINGS First keyframes are animation settings for Firefox, webkit for Chrome. The margin left in the lines 0% and 5% should be same as the ones under "shuffle style covers" above. The RGBA colors for the 5%, 8%, and 100% lines will be the color around the covers on hover. The margin left after 8% and 100% will be where the covers move to on hover after a second. You can set the margin left after 0% or 5% to the amount too if you want it to move with no delay. */ @keyframes cover { 0% { box-shadow: rgba(0, 0, 0, 0); margin-left: -220px;} 5% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: -220px;} 8% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} 100% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} } @-webkit-keyframes cover { 0% { box-shadow: rgba(0, 0, 0, 0); margin-left: -220px;} 5% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: -220px;} 8% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} 100% { box-shadow: rgba(200, 200, 200, 0.85); margin-left: 400px;} } #list_surround:nth-of-type(n+4) tbody:hover .animetitle:before{ background-color: transparent; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 7px; content: ""; margin-left: 400px; margin-top: -5px; padding-right: 150px; padding-top: 220px ! important; position: absolute; z-index: 1; box-shadow: 0px 0px 8px 8px rgba(200, 200, 200, 0.85); animation: cover 12s linear; -webkit-animation: cover 4s linear; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } The code got broken over time. Delete all the old Shuffle style covers codes (except the import at the top) and use the codes from this link instead: http://tny.cz/52dcc2c3 btw it seems your covers are all unaligned cuz of the text-align:center; vertical-align:middle; codes in the CSS, and the fact there's no numbers collumn. Remove this or readd the numbers column if you wanna realign the covers. Not neccessary tho. |
Shishio-kunMar 6, 2015 12:44 PM
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |