View difference between Paste ID: vTh6TthL and GSYUiCCx
SHOW: | | - or go back to the newest paste.
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/iconmenu1.png") no-repeat scroll 100% 0 transparent;
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/iconmenuhover.png") no-repeat scroll 100% 0 transparent !important;
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6);
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important;
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon1db.png");
206+
    background-image: url("http://i.imgur.com/6SkWikl.png");
207
    right: 172px;
208
}
209
#mal_cs_listinfo:hover {
210-
    background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon1over.png");
210+
    background-image: url("http://i.imgur.com/cqLG4TL.png");
211
}
212
#mal_cs_links {
213-
    background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon2wx.png");
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon2over.png");
218+
    background-image: url("http://i.imgur.com/cyDkfTM.png");
219
}
220
#mal_cs_otherlinks {
221-
    background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon3tt.png");
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon3over.png");
226+
    background-image: url("http://i.imgur.com/xo96BJn.png");
227
}
228
#mal_cs_powered {
229-
    background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon4i.png");
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://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon4over.png");
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("https://dl.dropbox.com/u/57348187/MAL/PROZ2.png");
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
}