View difference between Paste ID: Mqrs9Qtz and FCJSj4TF
SHOW: | | - or go back to the newest paste.
1
<!---   PETALS 02 !  ———  a muse page by @woodsbeyond / rosevois.
2
 
3
— edit / customize the theme to your heart's content! i've done my best to organize and include instructions to the best of my ability, but if you have trouble with anything, feel free to ask!
4
— DO NOT delete the credit. if you add in a background image and it somehow obstructs the credit / makes it harder to see, you may adjust the position.
5
— find a bug, or something that looks wonky when you start customizing it? let me know so i can adjust it!
6
7
COLOUR PALETTE !   ———   these are the colours i've used within the code. they are listed here so you can easily do a find + replace on them to edit in your preferred colour.
8
9
#d2d2d2 :   grey. used for icon & container borders.
10
#f0f0f0 :   page background & title image border.
11
#fafafa :   container background, header image text, header image border. 
12
#bb8b86 :   header text ( for character name when you click on the pop up ), bold, scrollbar, & connection name.
13
#98b5ae :   links, italics, & text line above muse navigation on pop up.
14
#a9726d :   muse navigation links on pop up.
15
#373334 :   text. 
16
#ededed :   fade background on pop up.   --->
17
18
19
<!DOCTYPE html>
20
<html>
21
<head>
22
23
<title>PETALS, A MUSE PAGE.</title> <!--- Change the title of your page here --->
24
    <link rel="shortcut icon" href="{Favicon}">
25
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
26
27
<!-- POP UPS -->
28
29
<script type="text/javascript"
30
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
31
32
<script>
33
$(document).ready(function() {
34
//
35
$('a.poplight[href^=#]').click(function() {
36
var popID = $(this).attr('rel'); //Get Popup Name
37
var popURL = $(this).attr('href'); //Get Popup href to define size
38
var query= popURL.split('?');
39
var dim= query[1].split('&');
40
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
41
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
42
var popMargTop = ($('#' + popID).height() + 80) / 2;
43
var popMargLeft = ($('#' + popID).width() + 80) / 2;
44
//Apply Margin to Popup
45
$('#' + popID).css({
46
'margin-top' : -popMargTop,
47
'margin-left' : -popMargLeft
48
});
49
$('body').append('<div id="fade"></div>');
50
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
51
return false;
52
});
53
$('a.close, #fade').live('click', function() {
54
$('#fade , .popup_block').fadeOut(function() {
55
$('#fade, a.close').remove(); //fade them both out
56
});
57
return false;
58
});
59
});
60
</script>
61
62
<!--  TABS  -->
63
64
<script>
65
66
$(document).ready(function(){
67
   $("ul#tabs li").click(function(e){
68
       if (!$(this).hasClass("active")) {
69
           var tabNum = $(this).index();
70
           var nthChild = tabNum+1;
71
           $("ul#tabs li.active").removeClass("active");
72
           $(this).addClass("active");
73
           $("ul#tab li.active").removeClass("active");
74
           $("ul#tab li:nth-child("+nthChild+")").addClass("active");
75
       }
76
   });
77
});
78
79
</script>
80
81
<!-- TOOLTIPS -->
82
83
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
84
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> 
85
<script> 
86
(function($){ 
87
$(document).ready(function(){ 
88
$("[title],a[title],img[title]").style_my_tooltips({ 
89
tip_follows_cursor:true, 
90
tip_delay_time:90, 
91
tip_fade_speed:600, 
92
attribute:"title" 
93
}); 
94
}); 
95
})(jQuery); 
96
</script> 
97
98
<!--- FONT SCRIPTS --->
99
100
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
101
102
<!--- LINEAR ICONS  --->
103
104
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
105
106
<style>
107
108
/* TOOLTIPS */
109
 
110
.tooltip{
111
    display:inline;
112
    position:absolute;
113
}
114
 
115
#s-m-t-tooltip {
116
    color:#fafafa;
117
    border:3px double #cecece;
118
    margin:15px 10px 10px 10px;
119
    font-size:13px;
120
    text-transform:uppercase;
121
    font-family: 'Yanone Kaffeesatz', sans-serif;
122
    text-align:center;
123
    text-shadow:
124
   -1px -1px 0 #000,  
125
    1px -1px 0 #000,
126
    -1px 1px 0 #000,
127
     1px 1px 0 #000;
128
    padding:4px 8px 2px 8px;
129
    background:url('https://66.media.tumblr.com/7f687423c404b80b6782c879ae692680/tumblr_inline_pkdp18xPtG1wp1vtq_1280.png') repeat;
130
	z-index:9999999999; repeat;
131
}
132
133
/* SCROLLBAR */ 
134
135
::-webkit-scrollbar {  
136
    width:7px;
137
    background-color:#fafafa;
138
}
139
 
140
::-webkit-scrollbar-thumb{
141
    border:3px solid #fafafa;
142
    background-color:#bb8b86;
143
}
144
145
/* GENERAL STYLING */
146
147
a {
148
    color:#98b5ae;
149
    text-transform:uppercase;
150
    text-decoration:underline;
151
    font-weight:bold;
152
    letter-spacing:1px;
153
}
154
155
b, strong {
156
    font-size:13px;
157
    font-family: 'times', sans-serif;
158
    color: #bb8b86;
159
}
160
161
i, em {
162
    color:#98b5ae;
163
}
164
165
@font-face { font-family: "valentine"; src: url('https://dl.dropboxusercontent.com/s/3nei1qfbo38y9kk/valentine.ttf') ;}
166
167
/*  this heading is for the character name on pop up  */
168
h1 { 
169
    font-family:'valentine';
170
    font-size:30px;
171
    color:#bb8b86;
172
    text-align:center;
173
    text-transform:lowercase;
174
    word-spacing:4px;
175
    font-weight:bold;
176
    background-attachment:repeat;
177
    padding: 4px;
178
    margin-top:2px;
179
    margin-bottom:-5px;
180
}
181
182
183
/*  section headings within the pop up  */
184
h2 { 
185
    font-family: 'Yanone Kaffeesatz', sans-serif;
186
    font-size:12px;
187
    color:#fff;
188
    text-align:center;
189
    text-transform:uppercase;
190
    letter-spacing:2.5px;
191
    word-spacing:4px;
192
    font-weight:bold;
193
    border:3px double #fafafa;
194
    background-image:url('https://66.media.tumblr.com/2d173b59085dfefb146b48c530f04b10/tumblr_inline_pkdpb8xRDW1wp1vtq_1280.png');  /*  section heading image for the pop up.  */
195
    background-attachment:repeat;
196
    padding: 4px;
197
    margin-top:-10px;
198
    margin-bottom:15px;
199
    text-shadow:
200
   -1px -1px 0 #000,  
201
    1px -1px 0 #000,
202
    -1px 1px 0 #000,
203
     1px 1px 0 #000;
204
}
205
206
207
/* MAIN AREAS */
208
209
body {
210
    background-color:#f0f0f0;
211
    font-family: 'arial', sans-serif;
212
    font-size:10.5px;
213
    color:#373334; 
214
    line-height:1.5;
215
    letter-spacing:.5px;
216
217
}
218
219
/*  TITLE & NAV  */
220
221
#mnav {
222
    width:500px;
223
    text-align:center;
224
    line-height:30px;
225
    margin-top:0px;
226
    margin-left:0px;
227
    background-attachment:no-repeat;
228
}
229
230
#mnav a {
231
    color:#fafafa;
232
    font-size:12px;
233
    text-decoration:none;
234
    font-family: 'Yanone Kaffeesatz', sans-serif;
235
    padding:4px 10px 4px 10px;
236
    text-shadow:
237
   -1px -1px 0 #000,  
238
    1px -1px 0 #000,
239
    -1px 1px 0 #000,
240
     1px 1px 0 #000;
241
     transition:1s;
242
}
243
244
#mnav a:hover {
245
    text-decoration:underline;
246
    transition:1s;
247
}
248
249
#title {
250
    width:500px;
251
    height:470px;
252
    background:url('https://66.media.tumblr.com/c08bfd7378ec3ae9da93cef023716031/tumblr_inline_pn5zm9TSdX1wvl34y_1280.png');  /*  main image behind the title  */
253
    border:3px double #f0f0f0;
254
    top:0px;
255
    bottom:0px;
256
    left:0px;
257
    right:0px;
258
    margin:auto;
259
    position:fixed;
260
}
261
262
h3 {
263
    width:475px;
264
    font-family:'valentine';
265
    font-size:100px;
266
    color:#fafafa;
267
    text-align:center;
268
    font-weight:bold;
269
    text-transform:lowercase;
270
    transform:rotate(-3deg);
271
    margin-top:160px;
272
    margin-left:14px;
273
    line-height:75px;
274
    position:fixed;
275
}
276
277
#plus a {
278
    position:fixed;
279
    font-size:25px;
280
    color:#bb8b86;
281
    text-align:center;
282
    text-decoration:none;
283
    margin-top:390px;
284
    margin-left:450px;
285
    background-color:#fafafa;
286
    width:30px;
287
    height:30px;
288
    line-height:30px;
289
    padding:2px;
290
    border-radius:100px;
291
}
292
293
/*  TABS  */
294
295
ul#tabs {
296
   list-style-type: none;
297
   padding: 0;
298
   text-align: center;
299
   margin-left:-10px;
300
}
301
302
ul#tabs li {
303
    color: #fafafa;
304
    font-size:8px;
305
    line-height:14px;
306
    letter-spacing:1.5px;
307
    text-transform:uppercase;
308
    width:80px;
309
    display: inline-block;
310
    background:url('https://66.media.tumblr.com/7f687423c404b80b6782c879ae692680/tumblr_inline_pkdp18xPtG1wp1vtq_1280.png') repeat;  /*  background image for the links to switch between tabs.  */
311
    border:3px double #fafafa;
312
    margin-bottom: 4px;
313
    padding:4px;
314
    cursor: pointer;
315
    text-shadow:
316
   -1px -1px 0 #000,  
317
    1px -1px 0 #000,
318
    -1px 1px 0 #000,
319
     1px 1px 0 #000;
320
     transition:1s;
321
}
322
323
ul#tabs li:hover {
324
   color:#e0b9aa;
325
   transition:1s;
326
}
327
328
ul#tabs li.active {
329
   text-decoration:underline;
330
   transition:1s;
331
}
332
333
ul#tab {
334
   list-style-type: none;
335
   margin: 0;
336
   padding: 0;
337
}
338
339
ul#tab li {
340
   display: none;
341
}
342
343
ul#tab li.active {
344
   display: block;
345
}
346
347
348
/*  POP UPS  */
349
350
.popup_block{
351
    display:none;
352
    background:#fafafa;
353
    text-align:justify;
354
    padding:20px;
355
    outline:1px solid #d2d2d2;  
356
    position:fixed;
357
    top:53%;left:51%;
358
    z-index: 99999;
359
    width:450px; 
360
    height:540px; 
361
    overflow:hidden;
362
}
363
 
364
*html #fade {position: absolute;}
365
*html .popup_block {position: absolute;}
366
#fade {
367
    display:none;
368
    position:fixed;
369
    left:0px;
370
    top:0px;
371
    width:100%;
372
    height:100%;
373
    z-index:9999;
374
    background:#ededed;
375
    opacity:.6; /* change opacity to 1 for a solid colour, or .1-.9 for varying degrees of transparency. */
376
}
377
378
/*  MUSE INFO  */
379
380
#popname {
381
    width:100%;
382
    margin-top:-10px;
383
}
384
385
#popicon img {
386
    width:70px;
387
    height:70px;
388
    float:left;
389
    margin-top:15px;
390
    margin-left:25px;
391
    padding:2px;
392
    border:3px double #d2d2d2;
393
}
394
395
#poptag {
396
    width:250px;
397
    text-align:center;
398
    margin-top:15px;
399
    margin-bottom:5px;
400
    margin-left:158px;
401
    padding-bottom:0px;
402
    font-size:10px;
403
    color:#98b5ae;
404
    font-weight:200;
405
    font-style:italic;
406
    text-transform:lowercase;
407
    border-bottom:1px solid #d2d2d2;
408
}
409
410
#poptag a {
411
    color:#98b5ae;
412
    font-weight:200;
413
    font-style:italic;
414
    text-decoration:none;
415
    text-transform:lowercase;
416
}
417
418
#popnav {
419
    width:250px;
420
    text-align:center;
421
    margin-left:158px;
422
    font-size:12px;
423
}
424
425
#popnav a {
426
    color:#a9726d;
427
    text-decoration:none;
428
}
429
430
v {
431
    color: #fafafa;
432
    font-size:8px;
433
    line-height:20px;
434
    letter-spacing:1.5px;
435
    text-transform:uppercase;
436
    background:url('https://66.media.tumblr.com/7f687423c404b80b6782c879ae692680/tumblr_inline_pkdp18xPtG1wp1vtq_1280.png') repeat;  /*  background image for the verse names.  */
437
    border:3px double #fafafa;
438
    padding: 4px 4px 4px 12px;
439
    margin-left:-2px;
440
    text-shadow:
441
   -1px -1px 0 #000,  
442
    1px -1px 0 #000,
443
    -1px 1px 0 #000,
444
     1px 1px 0 #000;
445
}
446
447
#con {
448
    width:200px;
449
    height:120px;
450
    margin-top: -15px;
451
    margin-left: -1px;
452
    margin-right: 0px;
453
    margin-bottom: 20px;
454
    padding:2px;
455
    display:inline-block;
456
}
457
458
#con img {
459
    width:60px;
460
    height:60px;
461
    float:left;
462
    margin-top:20px;
463
    margin-left:5px;
464
    padding:2px;
465
    border-radius:100px;
466
    border:3px double #d2d2d2;
467
}
468
469
#conname {
470
    width:120px;
471
    height:30px;
472
    font-family:'valentine';
473
    font-size:20px;
474
    color:#bb8b86;
475
    text-align:center;
476
    text-transform:lowercase;
477
    transform: rotate(-3deg);
478
    margin-top:25px;
479
    margin-left:80px;
480
}
481
482
#coninfo {
483
    width:110px;
484
    height:20px;
485
    font-family: 'Yanone Kaffeesatz', sans-serif;
486
    font-size:10px;
487
    text-transform:uppercase;
488
    text-align:center;
489
    margin-top:-5px;
490
    margin-left:82px;
491
    padding-top:5px;
492
    border-top:1px solid #d2d2d2;
493
}
494
495
#popex {
496
    width:445px;
497
    height:26px;
498
    font-size:10px;
499
    line-height:26px;
500
    font-weight:bold;
501
    font-family: 'Yanone Kaffeesatz', sans-serif;
502
    text-transform:uppercase;
503
    text-align:center;
504
    margin-top:-10px;
505
    position:fixed;
506
    background-color:#fafafa;
507
}
508
509
#popex b {
510
    color:#bb8b86;
511
    font-size:13px;
512
    font-family:'valentine';
513
    text-transform:lowercase;
514
}
515
516
517
/* CREDIT — DO NOT TOUCH! */
518
519
520
#credit {
521
    bottom:10px;
522
    right:10px;
523
    border:1px solid #d2d2d2;
524
    font-size:10px;
525
    font-family: 'Open Sans', sans-serif;
526
    position:fixed;
527
    border-radius:100px;
528
}
529
 
530
#credit a {
531
    color:#bb8b86;
532
    padding:5px;
533
    text-decoration:none;
534
    background-color:#fafafa;
535
    border-radius:100px;
536
    transition-duration:1s;
537
    -moz-transition-duration:1s;
538
    -webkit-transition-duration:1s;
539
    -o-transition-duration:1s;
540
}
541
542
#credit a:hover {
543
    color:#98b5ae;
544
    text-decoration:none;
545
    background-color:#fafafa;
546
}
547
548
    
549
</style>
550
551
</head>
552
<body>
553
554
<div id="title"> 
555
556
<!---  this is your main page navigation. edit these to whatever you need.  --->
557
558
<div id="mnav"> <a href="/">go back</a> &nbsp;&nbsp;&nbsp; <a href="/">decree</a> &nbsp;&nbsp;&nbsp; <a href="/">author</a> &nbsp;&nbsp;&nbsp; <a href="/">dashboard</a>  </div>
559
560
    <h3> muse name </h3>   <!---  muse name that appears on the main image. i recommend just putting their first name, as making this line too long will make things wonky!  --->
561
    
562
   <div id="plus"> <a href="#?w=465" rel="name" class="poplight" title="click here !">+</a> </div>
563
    
564
</div>
565
566
567
<!---   START POP UP!  ---> 
568
  
569
<div id="name" class="popup_block">
570
571
<div id="popname"> <h1>character name</h1> </div>  <!--- your character's name, obvs. just keep it within the <h1> tags --->
572
573
<div id="popicon"> <img src="https://66.media.tumblr.com/03643946fc02a1f0de60af45b7c4627e/tumblr_inline_pn62ncAzFA1wvl34y_1280.png"> </div>   <!--- your muse icon. size is 70x70, but will resize. the borders are CODED IN so don't add them yourself. --->
574
575
576
<div id="poptag"> put a quote, add a <a href="/">link</a>, w/e u want </div>
577
<div id="popnav"> <a href="URL" title="LINK TITLE"><span class="lnr lnr-camera"></span></a> &nbsp;&nbsp;&nbsp; <a href="URL" title="LINK TITLE"><span class="lnr lnr-diamond"></span></a> &nbsp;&nbsp;&nbsp; <a href="URL" title="LINK TITLE"><span class="lnr lnr-pencil"></span></a> &nbsp;&nbsp;&nbsp; <a href="URL" title="LINK TITLE"><span class="lnr lnr-bubble"></span></a> &nbsp;&nbsp;&nbsp; <a href="URL" title="LINK TITLE"><span class="lnr lnr-heart"></span></a> &nbsp;&nbsp;&nbsp; <a href="URL" title="LINK TITLE"><span class="lnr lnr-book"></span></a> </div>  <!--- your muse links. i recommend using them for tags. if you want to change the symbols, go here:  https://linearicons.com/free  --->
578
579
580
<ul id="tabs">
581
<li class="active"> stats </li>
582
<li> verses </li>
583
<li> relations </li>
584
</ul>   <!---  these are the links to switch between tabs. change the titles to whatever you'd like, just keep them in the <li> tags.  --->
585
586
<!---  TABS START  --->
587
588
<ul id="tab">
589
590
<!---  START FIRST TAB!  BIO / STATS!  --->
591
592
<!--- this is your first tab, and the active one, which means it will show by default when you first click your pop up link. take care not to mess with any of the positioning tags unless you know what you're doing!  --->
593
594
<li class="active">
595
596
<div style="width:auto;height:355px;margin-top:18px;overflow-y:scroll;padding:16px;">
597
598
<ul style="padding-left:25px;padding-right:25px;margin-bottom:28px;margin-top:-15px;">
599
    
600
add a blurb or full biography / history here! or, if you'd rather just keep the statistics, delete the two ul tags around this snippet to erase it entirely. 
601
    
602
    </ul>
603
604
<h2>the basics</h2>  <!--- these are your headers to separate information sections. name them whatever, just keep them in a <h2> tag.  --->
605
606
<ul style="padding-left:25px;padding-right:25px;margin-bottom:28px;">
607
<b>full name.</b> &nbsp;&nbsp; tba<br>
608
<b>aka.</b> &nbsp;&nbsp; tba<br>
609
<b>age.</b> &nbsp;&nbsp; tba<br>
610
<b>gender & pronouns.</b> &nbsp;&nbsp; tba<br>
611
<b>orientation.</b> &nbsp;&nbsp; tba<br>
612
<b>species.</b> &nbsp;&nbsp; tba<br>
613
<b>occupation.</b> &nbsp;&nbsp; tba<br>
614
<b>residence.</b> &nbsp;&nbsp; tba
615
</ul>  <!--- change these to whatever information you want to include. just keep the spacing, and be sure to include a <br> tag after each line, unless it's the last one. if you want to add a new section, copy / paste this underneath your new  <h2>  heading:
616
617
<ul style="padding-left:25px;margin-bottom:28px;">
618
<b>info.</b> &nbsp;&nbsp; tba<br>
619
<b>info.</b> &nbsp;&nbsp; tba<br>
620
<b>info.</b> &nbsp;&nbsp; tba
621
</ul>  
622
623
alternately, if you just want a regular text section,  copy / paste this:
624
625
<ul style="padding-left:25px;margin-bottom:28px;">
626
write your text here! 
627
<br><br>  
628
add a new paragraph if you need to!
629
</ul>        --->
630
631
<h2>physical appearance</h2>
632
633
<ul style="padding-left:25px;padding-right:25px;margin-bottom:28px;">
634
<b>hair.</b> &nbsp;&nbsp; tba<br>
635
<b>eyes.</b> &nbsp;&nbsp; tba<br>
636
<b>complexion.</b> &nbsp;&nbsp; tba<br>
637
<b>build.</b> &nbsp;&nbsp; tba<br>
638
<b>scars.</b> &nbsp;&nbsp; tba<br>
639
<b>tattoos.</b> &nbsp;&nbsp; tba<br>
640
<b>piercings.</b> &nbsp;&nbsp; tba<br>
641
<b>etc.</b> &nbsp;&nbsp; tba<br>
642
<b>face claim(s).</b> &nbsp;&nbsp; tba
643
</ul>
644
645
<h2>personality</h2>
646
647
<ul style="padding-left:25px;padding-right:25px;margin-bottom:28px;">
648
<b>zodiac.</b> &nbsp;&nbsp; tba<br>
649
<b>alignment.</b> &nbsp;&nbsp; tba<br>
650
<b>hogwarts.</b> &nbsp;&nbsp; tba
651
<b>positive traits.</b> &nbsp;&nbsp; tba<br>
652
<b>negative traits.</b> &nbsp;&nbsp; tba
653
</ul>
654
655
<h2>medical record</h2>
656
657
<ul style="padding-left:25px;padding-right:25px;margin-bottom:28px;">
658
<b>mental.</b> &nbsp;&nbsp; tba<br>
659
<b>physical.</b> &nbsp;&nbsp; tba<br>
660
<b>phobias.</b> &nbsp;&nbsp; tba<br>
661
<b>eyesight.</b> &nbsp;&nbsp; tba<br>
662
<b>drug use.</b> &nbsp;&nbsp; tba<br>
663
<b>alcohol use.</b> &nbsp;&nbsp; tba<br>
664
<b>diet.</b> &nbsp;&nbsp; tba
665
</ul> 
666
667
<h2>background</h2>
668
669
<ul style="padding-left:25px;padding-right:25px;">
670
<b>birth place.</b> &nbsp;&nbsp; tba<br>
671
<b>ethnicity.</b> &nbsp;&nbsp; tba<br>
672
<b>parents.</b> &nbsp;&nbsp; tba<br>
673
<b>siblings.</b> &nbsp;&nbsp; tba<br>
674
<b>pets.</b> &nbsp;&nbsp; tba<br>
675
<b>education.</b> &nbsp;&nbsp; tba<br>
676
<b>notable skills.</b> &nbsp;&nbsp; tba<br>
677
<b>languages.</b> &nbsp;&nbsp; tba<br>
678
<b>abilities.</b> tba
679
</ul>
680
681
</li> 
682
<!---  END FIRST TAB!  --->
683
684
685
<!---  START SECOND TAB!  VERSES!  --->
686
<li> 
687
688
<div style="width:auto;height:355px;overflow-y:scroll;padding:16px;">
689
690
<ul style="padding-left:5px;padding-right:5px;margin-bottom:28px;">
691
    <v> verse name. </v> &nbsp;&nbsp; add your verse information here.
692
    </ul>
693
    
694
<!---   to add a new verse,  copy / paste this:
695
696
<ul style="padding-left:5px;padding-right:5px;margin-bottom:28px;">
697
    <v> verse name. </v> &nbsp;&nbsp; add your verse information here.
698
    </ul>             --->
699
700
</li>  
701
<!---  END SECOND TAB!  --->
702
703
704
<!---  START THIRD TAB!  RELATIONS!  --->
705
<li>  
706
707
<div style="width:auto;height:385px;overflow-y:scroll;margin-top:20px;padding-left:20px;">
708
709
<div id="con"> <img src="https://66.media.tumblr.com/cc4a682f4327ad04f8eb42354dfd4a28/tumblr_inline_pkdq6l3hqT1wp1vtq_1280.png"> <div id="conname"> name. </div> <div id="coninfo"> <a href="/">user</a> </div> </div>  
710
711
<!---  to add a new connection,  copy / paste this:
712
713
<div id="con"> <img src="IMAGE URL"> <div id="conname"> name. </div> <div id="coninfo"> <a href="URL">user</a> </div> </div>
714
715
i recommend keeping the name to just their first name so it doesn't overflow weirdly. you can keep their username at the bottom, put their relationship type to your muse, or whatever you want. just keep it short!   --->
716
717
</div>
718
719
</li>
720
<!---  END THIRD TAB!  --->
721
722
</ul>
723
<!---  END TABS  --->
724
</div>
725
<!---  POP UP END!  --->
726
727
<!--- CREDIT.  DO NOT TOUCH! --->
728
729
<div id="credit"><a href="http://woodsbeyond.tumblr.com" title="woodsbeyond"><span class="lnr lnr-heart"></span></a></div>  
730
731
</body>
732
</html>