API tools faq
paste
pjo06

Theme #005 - Thelma v.2

pjo06
Nov 10th, 2015
316
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.42 KB | None | 0 0
raw download clone embed print report
  1. <!--THEME BY LAURAHOLLIIS ~ DO NOT REMOVE CREDIT-->
  2. <!--TH5 - thelma-->
  3. <!--w/ scroll down-->
  4.  
  5. <!--links roll down = overflow v.2-->
  6.  
  7.  
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  10. <head><title>{Title}</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  14.  
  15. <!--TEST BLOG 4-->
  16.  
  17. <meta name="color:bg" content="#ffffff" />
  18. <meta name="color:text" content="#5a5a5a" />
  19. <meta name="color:link" content="#5a5a5a" />
  20. <meta name="color:link hover" content="#5a5a5a" />
  21. <meta name="color:gray out" content="#e5e5e5"/>
  22. <meta name="color:graybg" content="#f4f4f4"/>
  23. <meta name="color:Scrollbar" content="#df1f3a">
  24.  
  25.  
  26. <meta name="image:Sidebar" content=""/>
  27. <meta name="text:link1" content="" />
  28. <meta name="text:link 1 URL" content="/" />
  29. <meta name="text:link2" content="" />
  30. <meta name="text:link 2 URL" content="/" />
  31.  
  32.  
  33.  
  34.  
  35. <!--START-->
  36.  
  37. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  38.  
  39. <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  40.  
  41. <!--TOOLTIPS-->
  42. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  43. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  44. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  45. <script>
  46. (function($){
  47. $(document).ready(function(){
  48. $("[title]").style_my_tooltips({
  49. tip_follows_cursor:true,
  50. tip_delay_time:200,
  51. tip_fade_speed:300
  52. });
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57.  
  58.  
  59. <style type="text/css">
  60.  
  61. ::-webkit-scrollbar-thumb:vertical {background-color:{color:Scrollbar};height:5px;}
  62. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:Scrollbar};height:5px!important;}
  63. ::-webkit-scrollbar {background-color:{color:Background};height:5px;width:6px;}
  64.  
  65.  
  66. #s-m-t-tooltip {
  67. max-width:300px;
  68. margin:15px;
  69. padding:3px;
  70. border:1px solid {color:gray out};
  71. border-radius:0px;
  72. background:white;
  73. color:{color:text};
  74. z-index:999999;
  75. font-size:7px;
  76. font-style:none;
  77. font-weight:lighter;
  78. letter-spacing:1px;
  79. font-family:trebuchet ms;
  80. text-transform:uppercase;
  81. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  82. }
  83.  
  84.  
  85.  
  86. body {
  87. font-family:calibri;
  88. font-size:11px;
  89. color:{color:text};
  90. background-color:{color:bg};
  91. }
  92.  
  93. #entry {
  94. margin-bottom:80px;
  95. margin-top:80px;
  96. margin-left:5px;
  97. }
  98.  
  99.  
  100. #posts {
  101. width:500px;
  102. margin-left:560px;
  103. margin-bottom:90px;
  104. {block:PermalinkPage}
  105. margin-bottom:30px;
  106. {/block:PermalinkPage}
  107. }
  108.  
  109.  
  110. a {
  111. text-decoration:none;
  112. color:{color:link};
  113. }
  114.  
  115. a:hover {
  116. text-decoration:underline;
  117. color:{color:link hover};
  118.  
  119. }
  120.  
  121.  
  122.  
  123.  
  124. /*SIDEBAR*/
  125.  
  126. #sidebar {
  127. width:245px;
  128. position:fixed;
  129. margin-left:190px;
  130. margin-top:80px;
  131. }
  132.  
  133. #sidebarimg {
  134. width:245px;
  135. text-align:center;
  136.  
  137. }
  138.  
  139. #sidebarimg img {
  140. width:245px;
  141. }
  142.  
  143.  
  144.  
  145. #description {
  146. width: 180px;
  147. text-align:justify;
  148. margin-top:15px;
  149. margin-left:30px;
  150. background-color:white;
  151. padding-bottom:15px;
  152. margin-bottom:-10px;
  153. }
  154.  
  155. .linkscaret {
  156. position:relative;
  157. opacity:1;
  158. color:#232323;
  159. text-align:center;
  160. margin-top:10px;
  161. width:180px;
  162. padding-bottom:2px;
  163. border:1px solid {color:gray out};
  164. margin-left:30px;
  165. background-color:{color:graybg};
  166. }
  167.  
  168.  
  169.  
  170. #caret {
  171. opacity:.5;
  172. -moz-transition-duration: 0.6s;
  173. -o-transition-duration: 0.6s;
  174. -webkit-transition-duration: 0.6s;
  175. transition-duration: 0.6s;
  176. }
  177.  
  178. #linksdown1 {
  179. position:relative;
  180. width:0px;
  181. background-color:yellow;
  182. margin-left:0px;
  183. }
  184.  
  185. #linksdown1:hover #caret{
  186. -moz-transform: rotate(180deg);
  187. -webkit-transform: rotate(180deg);
  188. -o-transform: rotate(180deg);
  189. transform: rotate(180deg);
  190.  
  191. -moz-transition-duration: 0.6s;
  192. -o-transition-duration: 0.6s;
  193. -webkit-transition-duration: 0.6s;
  194. transition-duration: 0.6s;
  195. }
  196.  
  197. /*#linksdown1:hover #linksdown2 {
  198. margin-top:0px;
  199. visibility:visible;
  200. position:relative;
  201. z-index:0;
  202. -moz-transition-duration: 0.4s ease-in-out;
  203. -o-transition-duration: 0.4s ease-in-out;
  204. -webkit-transition-duration: 0.4s ease-in-out;
  205. transition-duration: 0.4s ease-in-out;
  206. }*/
  207.  
  208. /*#linksdown2 {
  209. margin-top:-54px;
  210. position:relative;
  211. z-index:-6;
  212. visibility:visible;
  213. -moz-transition-duration: 0.4s ;
  214. -o-transition-duration: 0.4s;
  215. -webkit-transition-duration: 0.4s;
  216. transition-duration: 0.4s;
  217. }*/
  218.  
  219. /*#sidecover {
  220. width:245px;
  221. height:80px;
  222. background-color:white;
  223. position:absolute;
  224. z-index:-5;
  225. margin-top:-50px;
  226. }*/
  227.  
  228. .sidelinks {
  229. text-align:center;
  230. width:245px;
  231. word-spacing:2px;
  232. text-transform:uppercase;
  233. font-size:8px;
  234. margin-top:4px;
  235. margin-left:-2px;
  236. margin-bottom:0px;
  237. font-family:trebuchet ms;
  238. /*NEW*/
  239. height:0px;
  240. overflow: hidden;
  241. -webkit-transition: all .3s ease-in-out;
  242. -moz-transition: all .3s ease-in-out;
  243. -o-transition: all .3s ease-in-out;
  244. transition-duration: all .3s ease-in-out;
  245. }
  246.  
  247. /*NEW*/
  248. #linksdown1:hover .sidelinks {
  249. height:50px;
  250. -webkit-transition: all .3s ease-in-out;
  251. -moz-transition: all .3s ease-in-out;
  252. -o-transition: all .3s ease-in-out;
  253. transition-duration: all .3s ease-in-out;
  254. }
  255.  
  256.  
  257.  
  258. .sidelinks a {
  259. text-align:center;
  260. color:#232323;
  261. display:inline-block;
  262. width:75px;
  263. background-color:{color:graybg};
  264. border: 1px solid {color:gray out};
  265. padding:5px;
  266. margin:2px 0px 2px 0px;
  267.  
  268. }
  269.  
  270. .sidelinks a:hover {
  271. text-decoration:none;
  272.  
  273. }
  274.  
  275. #pagination {
  276. text-align:center;
  277. word-spacing:2px;
  278. text-transform:uppercase;
  279. font-size:13px;
  280. margin-top:15px;
  281. font-family:arial;
  282. position:relative;
  283. -moz-transition-duration: 0.4s ;
  284. -o-transition-duration: 0.4s;
  285. -webkit-transition-duration: 0.4s;
  286. transition-duration: 0.4s;
  287. }
  288.  
  289. #pagination a:hover {
  290. text-decoration:none;
  291. }
  292.  
  293.  
  294.  
  295.  
  296. #quote {
  297. font-style:italic;
  298. font-family:lato;
  299. font-size: 17px;
  300. }
  301.  
  302. .source {
  303. font-style:italic;
  304. }
  305.  
  306. .title {
  307. font-family:lato;
  308. font-size:17px;
  309. font-style:italic;
  310. }
  311.  
  312. .linkname {
  313. font-size:18px;
  314. font-style:italic;
  315. font-family:lato;
  316. }
  317.  
  318.  
  319. /*AUDIO*/
  320.  
  321. #albumart {
  322. position:relative;
  323. display:inline-block;
  324. z-index:999;
  325. margin-top:15px;
  326. margin-left:25px;
  327. }
  328.  
  329. .playbox {
  330. background-color:#fafafa;
  331. position:absolute;
  332. margin-left:61.5px;
  333. margin-top:51.5px;
  334. width:27px;
  335. height:27px;
  336. z-index:1000;
  337. opacity:.5;
  338. }
  339.  
  340. .playbutton {
  341. width: 27px;
  342. height: 27px;
  343. overflow: hidden;
  344. position: absolute;
  345. opacity:.5;
  346. -moz-transition-duration: 0.4s;
  347. -o-transition-duration: 0.4s;
  348. -webkit-transition-duration: 0.4s;
  349. transition-duration: 0.4s;
  350. }
  351.  
  352. .playbox:hover .playbutton {
  353. opacity:1;
  354. -moz-transition-duration: 0.4s;
  355. -o-transition-duration: 0.4s;
  356. -webkit-transition-duration: 0.4s;
  357. transition-duration: 0.4s;
  358. }
  359.  
  360. /*
  361. ORIGINAL
  362. .audiosrc {
  363. position:absolute;
  364. max-width:330px;
  365. margin-left:247px;
  366. margin-top:63px;
  367. font-size:9px;
  368. letter-spacing:1.5px;
  369. text-transform:uppercase;
  370. text-align:left;
  371. color:black;
  372.  
  373. }*/
  374.  
  375. .audiosrc {
  376. position:relative;
  377. display:inline-block;
  378. max-width:330px;
  379. margin-left:30px;
  380. top:-40px;
  381. font-size:9px;
  382. letter-spacing:1.5px;
  383. text-transform:uppercase;
  384. text-align:left;
  385. color:black;
  386. font-family:trebuchet ms;
  387.  
  388. }
  389.  
  390. #srccontainer {
  391. position:relative;
  392. background-color:none;
  393. width:500px;
  394. height:130px;
  395. z-index:999;
  396. margin-bottom:10px;
  397. border-radius:6px;
  398. }
  399.  
  400. /*QUESTION*/
  401.  
  402. .question {
  403. font-size:100px;
  404.  
  405. }
  406.  
  407. .asker {
  408. font-style:italic;
  409. text-transform:uppercase;
  410. font-size:12;
  411. text-align:center;
  412. }
  413.  
  414.  
  415. /*INFO*/
  416.  
  417.  
  418. #postinfo {
  419. text-transform:uppercase;
  420. font-family:trebuchet ms;
  421. font-size:9px;
  422. border:1px solid {color:gray out};
  423. margin-top:6px;
  424. padding:6px;
  425. background-color:{color:graybg};
  426. }
  427.  
  428. #postinfo a:hover {
  429. text-decoration:none;
  430. }
  431.  
  432. .notes ol, .notes li{
  433. list-style:none;
  434. }
  435.  
  436.  
  437. ol.notes li.note img.avatar {
  438. vertical-align:-8px;
  439. border-radius:100%;
  440. margin-right:10px;
  441. width:16px;
  442. height:16px;
  443. margin-top:4px;
  444. margin-bottom:4px;
  445. }
  446.  
  447.  
  448. .tags {
  449. margin-top:5px;
  450. font-size:10px;
  451. text-transform:none;
  452. margin-left:6px;
  453. font-family:trebuchet ms;
  454. {block:PermalinkPage}
  455. margin-bottom:40px;
  456. {/block:PermalinkPage}
  457. }
  458.  
  459. .tags a:hover {
  460. text-decoration:none;
  461. opacity:.6;
  462. -moz-transition-duration: 0.3s;
  463. -o-transition-duration: 0.3s;
  464. -webkit-transition-duration: 0.3s;
  465. transition-duration: 0.4s;
  466. }
  467.  
  468. .tags a {
  469. opacity:1;
  470. -moz-transition-duration: 0.3s;
  471. -o-transition-duration: 0.3s;
  472. -webkit-transition-duration: 0.3s;
  473. transition-duration: 0.3s;
  474. }
  475.  
  476.  
  477. blockquote {
  478. padding-left:5px;
  479. border-left:1px solid #e5e5e5;
  480. margin-left:25px;
  481.  
  482. }
  483.  
  484.  
  485. blockquote blockquote {
  486. padding-left:5px;
  487. border-left:1px solid #e5e5e5;
  488. margin-left:14px;
  489. }
  490.  
  491.  
  492. {CustomCSS}</style>
  493.  
  494.  
  495. </head>
  496. <body>
  497.  
  498. <div id="entry">
  499.  
  500.  
  501. <!--sidebar-->
  502.  
  503. <div id="sidebar">
  504.  
  505.  
  506. {block:IfSidebarImage}
  507. <div id="sidebarimg"><img src="{image:sidebar}"></div>
  508. {/block:IfSidebarImage}
  509.  
  510.  
  511. <div id="description">
  512. {description}
  513. </div>
  514.  
  515.  
  516.  
  517. <div id="sidecover"></div>
  518.  
  519.  
  520. <div id="linksdown1">
  521. <div class="linkscaret">
  522. <div id="caret">&#9660;</div>
  523. </div>
  524.  
  525.  
  526. <div id="linksdown2">
  527. <div class="sidelinks">
  528. <a href="/">home</a>
  529. <a href="/ask">ask</a><br>
  530. {block:IfLink1} <a href="{text:link 1 URL}">{text:link1}</a>{/block:IfLink1}
  531. {block:IfLink2} <a href="{text:link 2 URL}">{text:link2}</a>{/block:IfLink2}
  532.  
  533. </div></div>
  534.  
  535.  
  536.  
  537.  
  538.  
  539. </div>
  540.  
  541. <div id="pagination">
  542. {block:Pagination}
  543. {block:PreviousPage}<a href="{PreviousPage}">&larr;</a>&nbsp;&nbsp;{/block:PreviousPage}{block:NextPage}<a href="{NextPage}">&rarr;</a>{/block:NextPage}
  544. {/block:Pagination}
  545. </div>
  546.  
  547.  
  548.  
  549. </div>
  550.  
  551.  
  552.  
  553.  
  554. <!--posts-->
  555.  
  556. {block:posts} <div id="posts">
  557.  
  558. {block:Text}
  559. <div class="title">{block:Title}{Title}{/block:Title}</div>{Body}
  560. {/block:Text}
  561.  
  562. {block:Photo}
  563. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}
  564. {/block:Photo}
  565.  
  566. {block:Photoset}
  567. {Photoset-500}{block:Caption}{Caption}{/block:Caption}
  568. {/block:Photoset}
  569.  
  570. {block:Quote}
  571. <div id="quote">{Quote}</div><div class="source">{block:Source}— {Source}{/block:Source}</div>
  572. {/block:Quote}
  573.  
  574. {block:Link}
  575. <a href="{URL}"><div class="linkname">{Name}</div></a>{block:Description}{description}{/block:Description}
  576. {/block:Link}
  577.  
  578. {block:Chat}
  579. {block:title}<h2>{Title}</h2>{/block:title}{block:lines}{block:label}<b>{label}</b>{/block:label} {line} <br>{/block:lines}
  580. {/block:Chat}
  581.  
  582.  
  583.  
  584. {block:Audio}
  585.  
  586. {block:AudioPlayer}
  587. <div class="audiocontainer">
  588. <div class="playbox"><div class="playbutton">{AudioPlayerWhite}</div></div>
  589. <div id="srccontainer">
  590. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100px" height="100px">{/block:AlbumArt}</div>
  591. <div class="audiosrc">
  592. {block:Artist}<b>Artist:</b> {Artist}{/block:Artist}<br>
  593. {block:TrackName}<b>Track:</b> {TrackName}{/block:TrackName}<br>
  594. </div></div></div>
  595. {/block:AudioPlayer}
  596.  
  597. {block:AudioEmbed}
  598. {AudioEmbed}
  599. {/block:AudioEmbed}
  600.  
  601. {block:Caption}{Caption}
  602. {/block:Caption}
  603. {/block:Audio}
  604.  
  605.  
  606.  
  607.  
  608. {block:video}
  609. {VideoEmbed-500}{block:Caption}{caption}{/block:Caption}
  610. {/block:video}
  611.  
  612. {block:answer}<div id="caption">
  613. <div class="question">
  614. <div class="asker">
  615. <b>{asker} said:</b></div>
  616. <br>{question}
  617. </div>
  618. {Answer}</div>
  619. {/block:answer}
  620.  
  621.  
  622. <!--postinfo-->
  623.  
  624. <div id="postinfo">
  625.  
  626. <!--{block:Date}
  627. {TimeAgo}
  628. {/block:Date}-->
  629.  
  630. {block:Date}
  631. <span title="{timeago}"><a href="{permalink}">{DayOfMonthWithZero} {ShortMonth} {ShortYear}</a></span>
  632. {/block:Date}
  633. /
  634. <a href="{Permalink}">
  635. {NoteCountWithLabel}
  636. </a>
  637.  
  638. <font style="float:right">
  639. {block:RebloggedFrom}
  640. <a href="{ReblogParentURL}"><span title="{ReblogParentname}">via</span></a> / <a href="{ReblogRootURL}"><span title="{Reblogrootname}">src</span></a>
  641. {/block:RebloggedFrom}</font style>
  642.  
  643.  
  644. {block:ContentSource}
  645. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  646. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  647. {/block:SourceLogo}
  648. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  649. {/block:ContentSource}
  650.  
  651.  
  652. <br>
  653.  
  654. </div>
  655.  
  656. <div class="tags">
  657. {block:HasTags}
  658. {block:tags}
  659. <a href="{TagURL}">#{Tag}&nbsp;&nbsp;</a>
  660. {/block:tags}
  661. {/block:HasTags}
  662. </div>
  663.  
  664.  
  665.  
  666. <div class="notes">
  667. {block:PostNotes}{PostNotes}{/block:PostNotes}
  668. </div>
  669.  
  670.  
  671. </div>{/block:posts}
  672.  
  673. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  674. <script type="text/javascript">
  675. window.onload = function() {
  676. $('iframe.photoset').contents().find('.photoset_row').attr("style", "width:500px; margin-bottom: -4px;");
  677. $('iframe.photoset').contents().find('.photoset_row').find('img').attr("style", "width:500px;");
  678. $('iframe.photoset').contents().find('.photoset_row_2').find('img').attr("style", "width:245px; margin-right: 0px;");
  679. $('iframe.photoset').contents().find('.photoset_row_3').find('img').attr("style", "width:160px; margin-right: 0px;");
  680. }
  681. </script>
  682.  
  683. </div>
  684.  
  685. <div style="position:fixed; bottom:10px; right:10px; padding:2px 2px; font-size:11px;">
  686. <a href="http://lauraholliis.tumblr.com"><i class="fa fa-code"></i></a>
  687. </div>
  688.  
  689. </body>
  690. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!