SHARE
TWEET

MyAnimeList Style Imgur

muntoo Aug 15th, 2014 442 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import "http://fonts.googleapis.com/css?family=Varela+Round";
  2. @import "http://fonts.googleapis.com/css?family=Margarine";
  3. @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
  4.  
  5.  
  6.  
  7. /*
  8. UNCOMMENT IF Dropbox CSS disappears
  9.  
  10.  
  11. @import "https://googledrive.com/host/0BxjwQr0BBXs-d3FsNkY4amVQU0U";
  12.  
  13. div > table:first-of-type {
  14.     background: url("http://i.imgur.com/CLsRYIm.png") no-repeat scroll 100% 0 transparent;
  15.     display: block;
  16.     height: 32px !important;
  17.     overflow: hidden;
  18.     padding-top: 32px !important;
  19.     position: fixed;
  20.     right: 4px;
  21.     table-layout: fixed;
  22.     text-align: center;
  23.     top: 4px;
  24.     width: 64px !important;
  25.     z-index: 6;
  26.     -moz-box-sizing: border-box;
  27. -moz-transition: all 0.4s ease 0s;
  28. -o-transition: all 0.4s ease 0s;
  29. transition: all 0.4s ease 0s;
  30. }
  31. div > table:first-of-type:hover {
  32.     background: url("http://i.imgur.com/wjPQ1DD.png") no-repeat scroll 100% 0 transparent !important;
  33.     height: auto !important;
  34.     width: auto !important;
  35. }
  36. div > table:first-of-type tbody {
  37.     height: 32px !important;
  38.     overflow: hidden;
  39. }
  40. div > table:first-of-type tr {
  41.     background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
  42.     border-radius: 3px 0 3px 3px;
  43.     display: block;
  44.     padding: 8px 0 4px;
  45. }
  46. div > table:first-of-type td {
  47.     background: none repeat scroll 0 0 rgba(255, 255, 255, 0);
  48.     display: block;
  49.     width: 100%;
  50. }
  51. div > table:first-of-type a {
  52.     background-color: rgba(64, 60, 90, 0.6);
  53.     border-radius: 3px 3px 3px 3px;
  54.     color: #FFFFFF;
  55.     display: block;
  56.     font: 13px/17px 'Arial',sans-serif;
  57.     margin: 0 12px 4px;
  58.     padding: 3px 16px;
  59.     text-decoration: none;
  60. }
  61. div > table:first-of-type a:hover {
  62.     background-color: #403C5A;
  63. color: white;
  64. }
  65. #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered {
  66.     -moz-box-sizing: border-box;
  67.     -moz-transition: all 0.4s ease 0s;
  68. -webkit-transition: all 0.4s ease 0s;
  69. -o-transition: all 0.4s ease 0s;
  70. transition: all 0.4s ease 0s;
  71.     background: none no-repeat scroll 100% 0 transparent;
  72.     border: 0 none;
  73.     height: 0 !important;
  74.     overflow: hidden;
  75.     padding: 32px 0 0 !important;
  76.     position: fixed;
  77.     right: 4px;
  78.     text-align: center;
  79.     top: 4px;
  80.     width: 150px !important;
  81.     z-index: 10;
  82. }
  83. #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover {
  84.     height: 200px !important;
  85.     padding-top: 32px !important;
  86. }
  87. #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd {
  88.     -moz-transition: all 0.4s ease 0s;
  89. -webkit-transition: all 0.4s ease 0s;
  90. -o-transition: all 0.4s ease 0s;
  91. transition: all 0.4s ease 0s;
  92.     background-color: rgba(255, 255, 255, 0.6);
  93.     border-radius: 3px 0 0 0;
  94.     font-size: 0 !important;
  95.     line-height: 0;
  96.     margin: 0 !important;
  97.     opacity: 0;
  98.     padding: 8px 0 0 !important;
  99. }
  100. #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 {
  101.     opacity: 1;
  102. }
  103. #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) {
  104.     border-radius: 0 0 3px 3px;
  105.     padding: 4px 0 8px !important;
  106. }
  107. #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a {
  108.     background-color: rgba(64, 60, 90, 0.6) !important;
  109.     border-radius: 3px 3px 3px 3px;
  110.     display: block;
  111.     font: 13px/17px 'Arial',sans-serif !important;
  112.     margin: 4px 12px 0;
  113.     padding: 3px 0 !important;
  114.     text-decoration: none;
  115. }
  116. #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) {
  117.     margin-top: 0;
  118. }
  119. #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover {
  120.     background-color: #403C5A !important;
  121. }
  122. #mal_cs_listinfo strong a strong {
  123.     font-weight: normal;
  124. }
  125. #mal_cs_otherlinks strong {
  126.     color: #333333;
  127.     display: block;
  128.     font: bold 13px/17px 'Arial',sans-serif !important;
  129.     padding: 0 4px 4px;
  130.     text-shadow: 0 1px 1px #FFFFFF;
  131. }
  132. #mal_cs_otherlinks strong a {
  133.     background: none repeat scroll 0 0 transparent !important;
  134.     border-radius: 0 0 0 0;
  135.     color: #333333;
  136.     display: inline;
  137.     font: bold 13px/17px 'Arial',sans-serif !important;
  138.     margin: 0;
  139.     padding: 0;
  140.     text-shadow: 0 1px 1px #FFFFFF;
  141. }
  142. #mal_cs_powered a {
  143.     background-color: rgba(255, 255, 255, 0.6) !important;
  144.     border-radius: 3px 0 0 0 !important;
  145.     display: block !important;
  146.     margin: 0 !important;
  147.     opacity: 0;
  148.     padding: 8px 0 0 !important;
  149. }
  150. #mal_cs_powered:hover a {
  151.     opacity: 1;
  152. }
  153. #mal_cs_powered a img {
  154. -moz-transition: all 0.4s ease 0s;
  155. -webkit-transition: all 0.4s ease 0s;
  156. -o-transition: all 0.4s ease 0s;
  157. transition: all 0.4s ease 0s;
  158.     background: url("http://i.imgur.com/JUjDzHA.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6);
  159.     border-radius: 3px 3px 3px 3px;
  160.     display: block;
  161.     height: 0;
  162.     margin: 0 12px;
  163.     padding: 23px 0 0 126px;
  164.     width: 0;
  165. }
  166. #mal_cs_powered a img:hover {
  167.     background-color: #403C5A;
  168. }
  169. #mal_cs_powered #search {
  170.     border-radius: 0 0 3px 3px;
  171.     padding: 8px !important;
  172.     position: relative;
  173. }
  174. #searchBox {
  175.     -moz-box-sizing: border-box;
  176.     border-color: #BCBCBC #D6D6D6 #D6D6D6;
  177.     border-radius: 2px 2px 2px 2px;
  178.     border-style: solid;
  179.     border-width: 1px;
  180.     color: #333333;
  181.     display: inline-block;
  182.     font-family: arial,sans-serif;
  183.     font-size: 13px;
  184.     height: 28px;
  185.     padding-left: 6px !important;
  186.     padding-right: 24px !important;
  187.     vertical-align: top;
  188.     width: 100px;
  189. }
  190. #searchBox:hover, #searchBox:focus {
  191.     border-color: #ACACAC #C6C6C6 #C6C6C6;
  192.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  193. }
  194. #searchListButton {
  195.     background: url("http://i.imgur.com/4ky3yR3.png") no-repeat scroll 0 0 transparent !important;
  196.     border-radius: 3px 3px 3px 3px;
  197.     height: 0;
  198.     margin: 0;
  199.     padding: 16px 0 0 19px !important;
  200.     position: absolute;
  201.     right: 12px !important;
  202.     top: 14px !important;
  203.     width: 0;
  204. }
  205. #mal_cs_listinfo {
  206.     background-image: url("http://i.imgur.com/6SkWikl.png");
  207.     right: 172px;
  208. }
  209. #mal_cs_listinfo:hover {
  210.     background-image: url("http://i.imgur.com/cqLG4TL.png");
  211. }
  212. #mal_cs_links {
  213.     background-image: url("http://i.imgur.com/c2XUvF5.png");
  214.     right: 138px !important;
  215.     z-index: 9;
  216. }
  217. #mal_cs_links:hover {
  218.     background-image: url("http://i.imgur.com/cyDkfTM.png");
  219. }
  220. #mal_cs_otherlinks {
  221.     background-image: url("http://i.imgur.com/O4CLn9v.png");
  222.     right: 104px !important;
  223.     z-index: 8;
  224. }
  225. #mal_cs_otherlinks:hover {
  226.     background-image: url("http://i.imgur.com/xo96BJn.png");
  227. }
  228. #mal_cs_powered {
  229.     background-image: url("http://i.imgur.com/1cINxOf.png");
  230.     position: fixed !important;
  231.     right: 70px !important;
  232.     z-index: 7;
  233. }
  234. #mal_cs_powered:hover {
  235.     background-image: url("http://i.imgur.com/Hz4N889.png");
  236. }
  237. #mal\_control\_strip {
  238.     background: none repeat scroll 0 0 transparent !important;
  239. }
  240. #mal_cs_pic img {
  241.     display: none;
  242. }
  243. #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
  244.     border-right: 0 none !important;
  245. }
  246.  
  247.  
  248.  
  249. @media screen and (-webkit-min-device-pixel-ratio:0){
  250.  
  251. #mal_cs_powered #search #searchBox {
  252. width: 95px !important;
  253. }
  254.  
  255. div > table:first-of-type{
  256.     height: 0px !important;
  257. }
  258. }
  259.  
  260. *:-o-prefocus, #mal_cs_powered #search #searchBox {
  261. width: 95px !important;
  262. }
  263.  
  264. :root #mal_cs_powered #search #searchBox {
  265. width: 95px \0/;
  266. }
  267.  
  268. :root div > table:first-of-type {
  269. right: 68px \0/;
  270. }
  271.  
  272. :root div > table:first-of-type a {  
  273. margin-left: 60px \0/;
  274. }
  275.  
  276.  
  277.  
  278. */
  279.  
  280.  
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289.  
  290.  
  291. /*
  292. HOW TO USE
  293. Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes:
  294. http://myanimelist.net/forum/?topicid=200320
  295.  
  296.  
  297. When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below)
  298. to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box.
  299. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial!
  300.  
  301.  
  302. If the layout looks weird on your list after installing, you can try to alter your settings here.
  303. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards):
  304. http://myanimelist.net/editprofile.php?go=listpreferences
  305.  
  306.  
  307. If your list still has problems you can ask us about it here, or other questions:
  308. http://myanimelist.net/forum/?topicid=200323
  309.  
  310.  
  311. And you'll find further ways to customize your list here:
  312. http://myanimelist.net/forum/?topicid=419405
  313.  
  314. */
  315.  
  316.  
  317. body {
  318. background-attachment: fixed;
  319. background-image: url("http://i.imgur.com/hUJ9R63.jpg");
  320. background-size: cover;
  321. }
  322. body {
  323. background-position: 0px 49%;
  324. }
  325. .header_title {
  326. background-color: transparent;
  327. background-image: url("http://i.imgur.com/KQTAmdw.png");
  328. color: white;
  329. font-family: 'Margarine',cursive;
  330. font-size: 26px;
  331. text-align: left;
  332. text-shadow: 3px 3px 3px #000000;
  333. }
  334. .table_header {
  335. background-image: url("http://i.imgur.com/KQTAmdw.png");
  336. }
  337. .animetitle, .animetitle:visited {
  338. color: white;
  339. font-family: 'Varela Round',sans-serif;
  340. font-size: 13px;
  341. text-shadow: 0 2px 1px #000000;
  342. }
  343. .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
  344. color: white;
  345. font-family: 'Varela Round',sans-serif;
  346. font-size: 12px;
  347. text-shadow: 0 2px 1px #000000;
  348. }
  349. #list_surround {
  350. width: 900px;
  351. }
  352. #list_surround {
  353. left: 0 !important;
  354. margin: auto !important;
  355. position: absolute !important;
  356. right: 0 !important;
  357. }
  358. body {
  359. background-color: #FBFDE8;
  360. background-repeat: no-repeat;
  361. }
  362. #list_surround {
  363. background-image: url("");
  364. left: 2px;
  365. position: absolute;
  366. }
  367. a {
  368. text-decoration: none;
  369. }
  370. a:visited {
  371. text-decoration: none;
  372. }
  373. a:hover, a:visited:hover {
  374. color: #D3D3D3;
  375. text-decoration: underline;
  376. }
  377. .category_totals, .td1, .td2, #grand_totals, #copyright {
  378. background-image: url("http://i.imgur.com/KQTAmdw.png");
  379. border-width: 0;
  380. padding: 2px;
  381. }
  382. .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover {
  383. background-image: url("http://i.imgur.com/4MLoWiJ.png");
  384. border-width: 0;
  385. padding: 2px;
  386. }
  387. #copyright:after {
  388. content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
  389. }
  390. .status_selected {
  391. background-color: black;
  392. color: white;
  393. display: none;
  394. padding: 2px;
  395. text-decoration: blink;
  396. }
  397. .status_not_selected {
  398. background-color: black;
  399. color: white;
  400. display: none;
  401. padding: 2px;
  402. }
  403. .status_selected a {
  404. color: blue;
  405. display: none;
  406. }
  407. .status_not_selected a {
  408. color: white;
  409. display: none;
  410. }
  411. .thickbox {
  412. color: cyan;
  413. font-family: 'Happy Monkey',cursive;
  414. font-size: 12px;
  415. text-shadow: 2px 2px 2px #000000;
  416. }
  417. .header_title {
  418. height: 32px;
  419. padding: 2px;
  420. }
  421. .table_header {
  422. border-width: 0;
  423. font-weight: bold;
  424. padding: 2px;
  425. }
  426. .category_totals {
  427. height: 30px;
  428. }
  429. #copyright, #grand_totals {
  430. margin: 0 auto;
  431. text-align: center;
  432. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top