Advertisement
thematchgirl

Theme 01

Jan 3rd, 2013
755
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.05 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <meta name="font:title" content="Century Gothic" />
  9. <meta name="font:body" content="Century Gothic" />
  10. <meta name="font:description" content="Century Gothic" />
  11. <meta name="color:background" content="#d9d9d9" />
  12. <meta name="color:menubackground" content="#d8d8d8" />
  13. <meta name="color:post" content="#d2d2d2" />
  14. <meta name="color:sidebar" content="#d2d2d2" />
  15. <meta name="color:description" content="#878787" />
  16. <meta name="color:text" content="#878787" />
  17. <meta name="color:titlebg" content="#cecece" />
  18. <meta name="color:titlecolor" content="#fff" />
  19. <meta name="color:link" content="#585858" />
  20. <meta name="color:border" content="#cecece" />
  21. <meta name="color:link hover" content="#848484" />
  22. <meta name="color:bold" content="#686868" />
  23. <meta name="color:italic" content="#8e8e8e" />
  24. <meta name="color:scrolltotop" content="#7d7d7d" />
  25.  
  26. <meta name="image:sidebarimg" content="http://i.imgur.com/WtuqM.png" />
  27. <meta name="image:post" content="http://i1167.photobucket.com/albums/q632/iBear19/Background9.gif" />
  28. <meta name="image:sidebarbg" content="http://i1167.photobucket.com/albums/q632/iBear19/Background9.gif" />
  29. <meta name="image:background" content="http://i1167.photobucket.com/albums/q632/iBear19/Background10.png" />
  30.  
  31. <meta name="text:Link1" content="" />
  32. <meta name="text:Link1URL" content=""/>
  33. <meta name="text:Link2" content="" />
  34. <meta name="text:Link2URL" content=""/>
  35. <meta name="text:Link3" content="" />
  36. <meta name="text:Link3URL" content=""/>
  37. <meta name="text:Link4" content="" />
  38. <meta name="text:Link4URL" content=""/>
  39. <meta name="text:Link5" content="" />
  40. <meta name="text:Link5URL" content=""/>
  41. <meta name="text:Link6" content="" />
  42. <meta name="text:Link6URL" content=""/>
  43. <meta name="text:fontsize" content="10px"/>
  44. <meta name="text:Music" content="" />
  45.  
  46. <meta name="if:ShowCaptions" content="0" />
  47. <meta name="if:FadingImages" content="1" />
  48. <meta name="if:InfiniteScroll" content="1" />
  49. <meta name="if:Links" content="0" />
  50. <meta name="if:ShowTags" content="0" />
  51. <meta name="if:MusicPlayer" content="0" />
  52.  
  53. <style type="text/css">
  54.  
  55.         *, body, a, a:hover {cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), auto;}
  56.  
  57.         body {
  58.         background: {color:background};
  59.         background-image: url({image:background});
  60.         background-attachment: fixed;
  61.         margin: 0;
  62.         padding: 0;
  63.         font-family: {font:Body};
  64.         font-size: {text:fontsize};
  65.         }
  66.        
  67.         ::-webkit-scrollbar-thumb:vertical {
  68.         background-color: #707070;
  69.         height: 30px;}
  70.  
  71.         ::-webkit-scrollbar {
  72.         height: 30px;
  73.         width: 4px;
  74.         background-color:#fff;}
  75.  
  76.         iframe#tumblr_controls {
  77.         right: 1px;
  78.         position: fixed;}
  79.  
  80.         blockquote {
  81.         border-left:3px solid {color:border};
  82.         padding:3px;
  83.         }
  84.  
  85.         a {
  86.         text-decoration:none;
  87.         outline:none;
  88.         -moz-outline-style:none;
  89.         cursor:url("http://www.freewebs.com/cbitwboxes/tiny.cur");
  90.         color:{color:link};}
  91.  
  92.         a:hover {
  93.         text-decoration: none;
  94.         color:{color:linkhover};}
  95.  
  96.         b,strong {
  97.         text-decoration:none;
  98.         color:{color:bold};}
  99.  
  100.         i,em {
  101.         text-decoration:none;
  102.         outline:none;
  103.         color:{color:italic};}
  104.  
  105.  
  106.         .button{
  107.         float:center;
  108.         color:{color:link};
  109.         text-align:center;
  110.         width:77px;
  111.         height:10px;
  112.         padding:10px 0px 10px 0px;
  113.         }
  114.          
  115.         .button:hover {
  116.         color:{color: link hover};
  117.         letter-spacing:3px;
  118.         font-weight:800;
  119.         }
  120.  
  121.         img {
  122.         max-width:500px;
  123.         {block:iffadingimages}{block:indexpage}opacity:.7;{/block:indexpage}{/block:iffadingimages}
  124.         -webkit-transition: all 0.7s ease-in-out;
  125.         -moz-transition: all 0.7s ease-in-out;
  126.         -o-transition: all 0.7s ease-in-out;
  127.         -ms-transition: all 0.7s ease-in-out;
  128.         transition: all 0.7s ease-in-out;
  129.         }
  130.          
  131.         img:hover{
  132.         opacity:1;
  133.         }
  134.          
  135.         .photo{
  136.         {block:iffadingimages}{Block:indexpage}opacity:.7;{/block:indexpage}{/block:iffadingimages}
  137.         -webkit-transition: all 0.7s ease-in-out;
  138.         -moz-transition: all 0.7s ease-in-out;
  139.         -o-transition: all 0.7s ease-in-out;
  140.         -ms-transition: all 0.7s ease-in-out;
  141.         transition: all 0.7s ease-in-out;
  142.         }
  143.          
  144.         .photo:hover{
  145.         opacity:1;}
  146.        
  147.         .navigate{
  148.             width:300px;
  149.             height:20px;
  150.             background:#6e6e6e;
  151.             padding:5px;
  152.             padding-top:6px;
  153.             }
  154.  
  155.         #bar
  156.             { width: 100%;
  157.             position:fixed;
  158.             top:0;
  159.             left:0;
  160.             background-color: {color:titlebg};
  161.             font-family: calibri;
  162.             font-size: 13px;
  163.             text-transform: uppercase;
  164.             line-height: 100%;
  165.             text-align: center;
  166.             letter-spacing: 5px;
  167.             padding-top:10px;
  168.             padding-bottom: 10px;
  169.             color: {color:titlecolor};
  170.             border-bottom:5px solid {color:border};
  171.             z-index:2000;
  172.             }
  173.  
  174.         #title {
  175.             font-family:{font:title};
  176.             color:{color:text};
  177.             font-size:18px;
  178.             font-style:bold;
  179.             text-align:center;
  180.             text-decoration:none;
  181.             }
  182.  
  183.  
  184.         #sidebar {
  185.             position:fixed;
  186.             margin-top:50px;
  187.             margin-left:150px;
  188.             width:250px;
  189.             height:300px;
  190.             padding:5px;
  191.             border: 5px solid {color:border};
  192.             background-image: url({image:sidebarimg});
  193.             border-radius:10px;
  194.             -moz-border-radius:10%;
  195.             }
  196.  
  197.         #sidebar2 {
  198.             position:fixed;
  199.             margin-top:375px;
  200.             {block:IfLinks}margin-top:460px;{/block:IfLinks}
  201.             margin-left:150px;
  202.             width:250px;
  203.             padding:5px;
  204.             border: 5px solid {color:border};
  205.             background-image: url({image:sidebarbg});
  206.             border-radius:10px;
  207.             -moz-border-radius:5%;
  208.             }
  209.  
  210.         #sidebar3 {
  211.             position:fixed;
  212.             margin-top:375px;
  213.             margin-left:150px;
  214.             width:250px;
  215.             padding:5px;
  216.             text-align: center;
  217.             border: 5px solid {color:border};
  218.             background-image: url({image:sidebarbg});
  219.             border-radius:10px;
  220.             -moz-border-radius:5%;
  221.             }
  222.        
  223.  
  224.         #description {
  225.             margin-top:2px;    
  226.             width: 250px;
  227.             font-size:11px;
  228.             text-align:justify;
  229.             color:{color:description};
  230.             font-family:{font:description};
  231.             }
  232.  
  233.             #posts {
  234.             width: 500px;
  235.             margin-left:450px;
  236.             margin-top:75px;
  237. }
  238.  
  239. #albumart {
  240. border:5px inset {color:border};
  241. }
  242.  
  243. #audioplayer {
  244. width:30px;
  245. height:30px;
  246. overflow:hidden;
  247. position:absolute;
  248. margin-top:40px;
  249. margin-left:35px;
  250. opacity: 0.7;
  251. filter:alpha(opacity=70);
  252. -moz-opacity: 0.7;
  253. -khtml-opacity: 0.7;
  254. }
  255.  
  256. .entry {
  257. padding: 20px;
  258.             width: 500px;
  259.             background-image:url({image:post});
  260.             color:{color:text};
  261.             border: 5px solid {color:border};
  262.             text-align: justify;
  263.             margin:15px;
  264.             border-radius:20px;
  265.             -moz-border-radius:20px;
  266.             -o-border-radius:20px;
  267.             -webkit-border-radius:20px;
  268. }
  269.  
  270.         #music{
  271.             text-align:center;
  272.             padding-bottom:4px;
  273.             padding-top:4px;
  274.             margin-top:275px;
  275.             margin-left:235px;
  276.             overflow:hidden;
  277.             left:5px;
  278.             width:74px;
  279.             height:10px;
  280.             z-index:999;
  281.             padding-left:4px;
  282.             padding-right:4px;
  283.             position:fixed;
  284.             opacity:.7;
  285.             -webkit-transition: all 0.5s ease-in-out;
  286.             -moz-transition: all 0.5s ease-in-out;
  287.             -o-transition: all 0.5s ease-in-out;
  288.             -ms-transition: all 0.5s ease-in-out;
  289.             transition: all 0.5s ease-in-out;}
  290.  
  291.         #music:hover #legif{
  292.             opacity:0;
  293.             margin-top:-10px;
  294.             z-index:-99;}
  295.            
  296.         #music:hover{
  297.             overflow:visible;
  298.             margin-left:175px;
  299.             }
  300.  
  301.         #gif{
  302.             opacity:.4;
  303.             z-index:1;
  304.             -webkit-transition: all 0.5s ease-in-out;
  305.             -moz-transition: all 0.5s ease-in-out;
  306.             -o-transition: all 0.5s ease-in-out;
  307.             -ms-transition: all 0.5s ease-in-out;
  308.             transition: all 0.5s ease-in-out;}
  309.  
  310.         #text{
  311.             opacity:0;
  312.             z-index:99;
  313.             padding:4px;
  314.             margin-top:0px;
  315.             -webkit-transition: all 0.5s ease-in-out;
  316.             -moz-transition: all 0.5s ease-in-out;
  317.             -o-transition: all 0.5s ease-in-out;
  318.             -ms-transition: all 0.5s ease-in-out;
  319.             transition: all 0.5s ease-in-out;}
  320.  
  321.         #music:hover #text{
  322.             opacity:1;
  323.             margin-top:-10px;}
  324.  
  325.         #links
  326.             {width:250px;
  327.             overflow:hidden;}
  328.  
  329.         #menu
  330.             {width:300px;
  331.             background-color:{color:menubackground};
  332.             margin-top: 300px;
  333.             margin-left: 135px;
  334.             position: fixed;
  335.             text-align: center;
  336.             overflow:hidden;
  337.             }
  338.  
  339.         #menu2
  340.             {width:310px;
  341.             margin-top: 325px;
  342.             margin-left: 130px;
  343.             position: fixed;
  344.             text-align: center;
  345.             overflow:hidden;
  346.             }
  347.  
  348.         .title {
  349.         text-transform:uppercase;
  350.         font-weight:700;
  351.         text-align:center;
  352.         font-size:16px;
  353.         }
  354.  
  355.         #info {
  356.         text-align:center;
  357.         border-top:1px solid {color:border};
  358.         font-size:9px;
  359.         text-transform:uppercase;
  360.         margin-top:10px;
  361.         }
  362.  
  363.         #credit {
  364. padding:5px;
  365. font-size:20px;
  366. background:#7d7d7d;
  367. color:#ffffff;
  368. position:fixed;
  369. bottom:0;
  370. right:-163px;
  371. transition: all 0.8s ease-out;
  372. -o-transition: all 0.8s ease-out;
  373. -webkit-transition: all 0.8s ease-out;
  374. -moz-transition: all 0.8s ease-out;
  375. text-shadow:none;
  376. }
  377.  
  378. #credit:hover {
  379. right:0;
  380. }
  381.  
  382. #credit a {
  383. color:#ffff;
  384. text-shadow:none;
  385. }
  386.  
  387. #scrolltotop {
  388. font-size:50px;
  389. color:{color:scrolltotop};
  390. position:fixed;
  391. bottom:25%;
  392. right:15%;
  393. }
  394.  
  395. #scrollToTop:link,
  396.     #scrollToTop:visited {
  397.         color: {color:scrolltotop};
  398.         background-color: transparent;
  399.         display: none;
  400.         position: fixed;
  401.         bottom: 150px;
  402.         right: 150px;
  403. font-size:50px;
  404.     }
  405.         {CustomCSS}
  406. </style>
  407.  
  408. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  409. <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  410.  
  411. </head>
  412.  
  413. <body>
  414.  
  415. <div class="topp">
  416.         <a href="javascript:;" id="scrollToTop"></a>
  417.     </div>
  418.  
  419.  
  420. <a href="http://thematchgirl.tumblr.com" title="theme maker"><div id="credit">❊ THE MATCH GIRL</div></a>
  421.  
  422. <div id="bar">{title}</div>
  423. <div id="sidebar"></div>
  424. <div id="menu">
  425. <a href="/"><img src="http://i1167.photobucket.com/albums/q632/iBear19/home.png"></a></td>
  426. <a href="/ask"><img src="http://i1167.photobucket.com/albums/q632/iBear19/letter.png"></a></td>
  427. <a href="/archive"><img src="http://i1167.photobucket.com/albums/q632/iBear19/archive.png"></a></td>
  428. <a href="/mobile"><img src="http://i1167.photobucket.com/albums/q632/iBear19/phone.png"></a></td>
  429. </div>
  430. <div id="menu2">
  431. <div style="font: 36px arial; color:{color:border}; float:left;"></div>
  432. <div style="font: 36px arial; color:{color:border}; float:right;"></div>
  433. </div>
  434. {block:IfLinks}<div id="sidebar3">
  435. <div><table id="links" border="0" cellpadding="0" cellspacing="0" align="center">
  436. <tr>
  437. {block:iflink1}<td><a href="{text:Link1URL}"><div class="button"><span style="font-size:10px">{text:Link1}</span></div></a></td>{/block:iflink1}
  438. {block:iflink2}<td><a href="{text:Link2URL}"><div class="button"><span style="font-size:10px">{text:Link2}</span></div></a></td>{/block:iflink2}
  439. {block:iflink3}<td><a href="{text:Link3URL}"><div class="button"><span style="font-size:10px">{text:Link3}</span></div></a></td>{/block:iflink3}
  440. </tr>
  441. <tr>
  442. {block:iflink4}<td><a href="{text:Link4URL}"><div class="button"><span style="font-size:10px">{text:Link4}</span></div></a></td>{/block:iflink4}
  443. {block:iflink5}<td><a href="{text:Link5URL}"><div class="button"><span style="font-size:10px">{text:Link5}</span></div></a></td>{/block:iflink5}
  444. {block:iflink6}<td><a href="{text:Link6URL}"><div class="button"><span style="font-size:10px">{text:Link6}</span></div></a></td>{/block:iflink6}
  445. </tr>
  446. </table>
  447. </div>
  448. </div>{/block:IfLinks}
  449. <div id="sidebar2">
  450. {block:Description}<div id="description">{Description}</div>{/block:Description}
  451. <center>
  452. {block:PreviousPage}<a href="{PreviousPage}">← previous</a>{/block:PreviousPage} {block:NextPage} <a href="{NextPage}">next →</a>{/block:NextPage}
  453. </center></div>
  454.  
  455. {block:IfMusicPlayer}
  456. {block:IndexPage}
  457. <div id="music">
  458. <div id="gif">
  459. <img src="http://media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"></div>
  460. <div id="text">
  461. {text:Music}
  462. </div>
  463. </div>
  464. {/block:IndexPage}
  465. {/block:IfMusicPlayer}
  466.  
  467. <div id="posts">
  468. {block:Posts}
  469.  
  470. <div class="entry">
  471.    
  472.    {block:Photo}
  473. <center><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt=""></a></center>
  474. {block:IndexPage}{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  475. {block:PermalinkPage}{block:Caption}
  476. {Caption}
  477. {/block:Caption}{/block:PermalinkPage}
  478. {/block:Photo}
  479.  
  480. {block:Photoset}
  481. <div class="photo">{Photoset-500}</div>
  482. {block:IndexPage}{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  483. {block:PermalinkPage}{block:Caption}
  484. {Caption}
  485. {/block:Caption}{/block:PermalinkPage}
  486. {/block:Photoset}
  487.    {block:Quote}<div class="title">“{Quote}” </div>
  488.    <center>— {Source}</center>{/block:Quote}
  489.     {block:Text}<a href="{permalink}"><div class="title">{block:Title}{Title}{/block:Title}</a></div>{Body}{/block:Text}
  490.    
  491.    {block:Answer}
  492. <center><img src="{PortraitURL-48}" style="border-radius:24px;border:5px solid {color:border};"></center><div class="question" style="background:{color:background};padding:5px;">
  493. <b>{Asker}</b> whispered: {Question}</div>
  494. {Answer}
  495. {/block:Answer}
  496.  
  497.  
  498.     {block:Link}
  499.     <div class="title"><a href="{URL}" target="{Target}" class="ttitle"  title="Title"> {Name}  →</a></div>
  500.     {block:Description} {Description} {/block:Description}
  501.     {/block:Link}
  502.    
  503.     {block:Chat}
  504.    {block:Title}
  505.     <div class="title"><a href="{Permalink}" class="ttitle"  title="Title">{Title}</a></div>
  506.     {/block:Title}
  507.     {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  508.  
  509.     {/block:Lines}
  510.     {/block:Chat}
  511.  
  512.  
  513.     {block:Audio}
  514. <table><tr><td><div id="audioplayer">{AudioPlayerWhite} </div>      
  515. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div></td><td  class="td2"><b>Plays:</b>{PlayCountWithLabel}
  516. <br>{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}
  517. <br>{block:Album}<b>Album:</b> {Album}{/block:Album}
  518. <br>{block:TrackName}<b>Title:</b> {TrackName}{/block:TrackName}
  519. </td></tr></table>
  520. {block:IndexPage}{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  521. {block:PermalinkPage}{block:Caption}
  522. {Caption}
  523. {/block:Caption}{/block:PermalinkPage}
  524. {/block:Audio}
  525.  
  526.  
  527.     {block:Video}
  528. {Video-500}
  529. {block:IndexPage}{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  530. {block:PermalinkPage}{block:Caption}
  531. {Caption}
  532. {/block:Caption}{/block:PermalinkPage}
  533.     {/block:Video}
  534.    
  535.    
  536.  
  537. <div id="info">posted <a href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount} • <a href="{Permalink}">{NoteCount}</a> notes{/block:NoteCount}{block:RebloggedFrom} (<a href="{ReblogParentURL}">{ReblogParentName}</a>
  538. {block:ContentSource} source <a href="{SourceURL}">{SourceLink}</a>){block:ContentSource}{/block:RebloggedFrom}<br>
  539.  
  540. {block:IfShowTags}{block:HasTags}{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}{/block:IfShowTags}</div>
  541.  
  542. </div>
  543.  
  544.  
  545.  
  546. {/block:Posts}
  547. </div>
  548. </body>
  549. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement