siothemes

Dahlia

Dec 17th, 2016
1,327
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.03 KB | None | 0 0
  1. <!---
  2.  
  3. Theme Dahlia
  4. by siothemes.tumblr.com / j-murphy.tumblr.com
  5.  
  6. yo this is my first theme - i hope you enjoy
  7.  
  8. base code by mrsthemes@tumblr <3 (im gonna try to make one from scratch next time)
  9.  
  10. ***make sure if you want hover tags you have 'show tags' turned on as well as 'hover tags' im pretty sure the rest of the options are more straightforward***
  11.  
  12.  
  13.  
  14. -->
  15.  
  16. <!DOCTYPE html>
  17. <head><title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21.  
  22.  
  23.  
  24. <!--------default variables-------->
  25. <meta name="color:background" content="#f7f7f7"/>
  26. <meta name="color:text" content="#333333"/>
  27. <meta name="color:links" content="#5b5b5b"/>
  28. <meta name="color:links hover" content="#c9c9c9"/>
  29. <meta name="color:scrollbar bg" content="#ffffff"/>
  30. <meta name="color:scrollbar" content="#eeeeee">
  31.  
  32. <meta name="image:sidebar image" content=""/>
  33.  
  34.  
  35. <meta name="if:show sidebar title" content="1" />
  36. <meta name="if:show description" content="1" />
  37. <meta name="if:show sidebar image" content="0" />
  38. <meta name="if:small sidebar image" content="1" />
  39. <meta name="if:circular sidebar image" content="1" />
  40. <meta name="if:captions" content="1" />
  41. <meta name="if:show tags" content="1" />
  42. <meta name="if:hover tags" content="1" />
  43. <meta name="if:show link 1" content="1" />
  44. <meta name="if:show link 2" content="1" />
  45. <meta name="if:show link 3" content="1" />
  46. <meta name="if:show link 4" content="1" />
  47.  
  48. <meta name="select:Sidetitle Type" content="uppercase" title="uppercase">
  49. <meta name="select:Sidetitle Type" content="lowercase" title="lowercase">
  50. <meta name="select:Sidetitle Type" content="none" title="neither">
  51.  
  52.  
  53. <meta name="text:link 1 title" content="link">
  54. <meta name="text:link 1 url" content="/">
  55. <meta name="text:link 2 title" content="link">
  56. <meta name="text:link 2 url" content="/">
  57. <meta name="text:link 3 title" content="link">
  58. <meta name="text:link 3 url" content="/">
  59. <meta name="text:link 4 title" content="link">
  60. <meta name="text:link 4 url" content="/">
  61.  
  62.  
  63.  
  64.  
  65.  
  66. <!------------------------TOOLTIPS SCRIPT--------------------->
  67.  
  68. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  69. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  70. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  71. <script>
  72. (function($){
  73. $(document).ready(function(){
  74. $("[title]").style_my_tooltips({
  75. tip_follows_cursor:true,
  76. tip_delay_time:200,
  77. tip_fade_speed:300
  78. });
  79. });
  80. })(jQuery);
  81. </script>
  82.  
  83.  
  84. <!-------------------------------------------------------------------->
  85.  
  86. <style type="text/css">
  87.  
  88. /*----------tooltips---------*/
  89.  
  90. #s-m-t-tooltip {
  91. max-width:300px;
  92. margin:15px;
  93. padding:5px;
  94. border:1px solid #eeeeee;
  95. border-radius:0px;
  96. background:#ffffff;
  97. color:{color:text};
  98. z-index:999999;
  99. font-size:7px;
  100. font-style:none;
  101. font-weight:lighter;
  102. letter-spacing:2px;
  103. font-family:helvetica;
  104. text-transform:uppercase;
  105. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  106. }
  107.  
  108.  
  109. /*----------lightbox---------*/
  110.  
  111. .vignette, #vignette {
  112. opacity:0;
  113. }
  114. .lightbox-image, #tumblr_lightbox img {
  115. box-shadow:none !important;
  116. border-radius:0 !important;
  117. max-width:none;
  118. }
  119.  
  120. .tmblr-lightbox, #tumblr_lightbox {
  121. background-color:rgba(245,245,245,.75) !important;
  122. }
  123.  
  124. .lightbox-image, #tumblr_lightbox img {
  125. border:5px solid #fff !important;
  126. -moz-box-sizing:border-box;
  127. box-sizing:border-box;
  128. }
  129.  
  130. /*----------scrollbar---------*/
  131.  
  132. ::-webkit-scrollbar {
  133. background-color: {color:scrollbar bg};
  134. height:8px;
  135. width:5px
  136. }
  137.  
  138. ::-webkit-scrollbar-thumb:vertical {
  139. background-color:{color:scrollbar};
  140. height:50px
  141. }
  142.  
  143. ::-webkit-scrollbar-thumb:horizontal {
  144. background-color:{color:scrollbar bg};
  145. height:8px!important
  146. }
  147.  
  148.  
  149. /*-------tumblr controls thanks to odeysseus.tumblr.com ------*/
  150.  
  151. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover { opacity:0.5; }
  152.  
  153.  
  154. /*----------basics---------*/
  155.  
  156. body {
  157. background:{color:background};
  158. color:{color:text};
  159. font-family:arial;
  160. line-height:15px;
  161. font-size:10px;
  162. margin:0;
  163. text-align:left;
  164. }
  165.  
  166. blockquote {
  167. padding-left:10px;
  168. border-left:1px solid;
  169. border-color:#eeeeee;
  170. margin:10px;
  171. }
  172.  
  173. a {
  174. color:{color:links};
  175. text-decoration:none;
  176. }
  177.  
  178. a:hover {
  179. text-decoration:none;
  180. color: {color:links hover};
  181. -webkit-transition:all 0.5s;
  182. -moz-transition:all 0.5s;
  183. -ms-transition:all 0.5s;
  184. -o-transition:all 0.5s;
  185. transition:all 0.5s;
  186. }
  187.  
  188. img {
  189. opacity:1;
  190. text-decoration:none;
  191. }
  192.  
  193. h1 {
  194. font-size:10px;
  195. font-weight:bold;
  196. }
  197.  
  198.  
  199. /*----------posts---------*/
  200.  
  201. .container {
  202. position:relative;
  203. margin:100px auto;
  204. width:400px;
  205. }
  206.  
  207.  
  208. .posts {
  209. {block:IndexPage}
  210. margin-bottom:80px;
  211. {/block:IndexPage}
  212. {block:PermalinkPage}
  213. margin-bottom:30px;
  214. {/block:PermalinkPage}
  215. width:400px;
  216. }
  217.  
  218. .entries {
  219. margin-left:-60px;
  220. width:400px;
  221. margin-top:50px;
  222. margin-bottom:50px;
  223. }
  224.  
  225. .posts img, .posts li, .posts blockquote {
  226. max-width: 400px;
  227. }
  228.  
  229. .posts li {
  230. list-style: square;
  231. }
  232.  
  233. blockquote img {
  234. max-width:320px!important;
  235. }
  236.  
  237.  
  238. /*----------post info---------*/
  239.  
  240. .info {
  241. padding-top:5px;
  242. text-transform:lowercase;
  243. font-size:8px;
  244. letter-spacing:1px;
  245. margin-top:15px;
  246. text-align:right;
  247. }
  248.  
  249. .tags {
  250. margin-top:5px;
  251. font-size:8px;
  252. letter-spacing:1px;
  253. font-style:italic;
  254. text-align:right;
  255. {block:ifHoverTags}
  256. opacity:0;
  257. {/block:ifHoverTags}
  258. }
  259.  
  260. {block:ifHoverTags}
  261. .posts:hover .tags {
  262. opacity:1;
  263. -moz-transition:all 0.8s;
  264. -ms-transition:all 0.8s;
  265. -o-transition:all 0.8s;
  266. transition:all 0.8s;
  267. }
  268. {/block:ifHoverTags}
  269.  
  270. .tags a {
  271. margin-right:8px;
  272. }
  273.  
  274.  
  275. /*----------post notes---------*/
  276.  
  277. ol.notes {
  278. padding:0px;
  279. margin:25px 0px 0px -10px;
  280. list-style-type:none;
  281. }
  282.  
  283. ol.notes li.note {
  284. padding:10px;
  285. }
  286.  
  287. ol.notes li.note img.avatar {
  288. display:none!important;
  289. }
  290.  
  291. ol.notes li.note span.action {
  292. font-weight:none;
  293. }
  294.  
  295. ol.notes li.note .answer_content {
  296. font-weight:normal;
  297. }
  298.  
  299. ol.notes li.note blockquote {
  300. padding:4px 10px;
  301. margin:10px 0px 0px 25px;
  302. }
  303.  
  304. ol.notes li.note blockquote a {
  305. text-decoration:none;
  306. }
  307.  
  308. /*----------sidebar---------*/
  309.  
  310. .sidebar {
  311. position:fixed;
  312. width:100px;
  313. margin-left:-225px;
  314. top:125px;
  315. }
  316.  
  317. .sidebarimage {
  318. {block:ifSmallSidebarImage}
  319. width:75px;
  320. {/block:ifSmallSidebarImage}
  321. {block:ifnotSmallSidebarImage}
  322. width:100px;
  323. {/block:ifnotSmallSidebarImage}
  324. }
  325.  
  326. .sidebarimage img {
  327. margin-bottom:5px;
  328. {block:ifSmallSidebarImage}
  329. width:75px;
  330. margin-left:12.5px;
  331. {/block:ifSmallSidebarImage}
  332. {block:ifnotSmallSidebarImage}
  333. width:100px;
  334. {/block:ifnotSmallSidebarImage}
  335. {block:ifCircularSidebarImage}
  336. border-radius:50%;
  337. {/block:ifCircularSidebarImage}
  338. }
  339.  
  340. .sidetitle {
  341. margin-top:5px;
  342. font-size:15px;
  343. font-weight:bold;
  344. width:100px;
  345. text-align:center;
  346. text-transform:{select:Sidetitle Type};
  347. }
  348.  
  349. .description {
  350. width:100px;
  351. text-align:center;
  352. margin-top:10px;
  353. }
  354.  
  355. .links {
  356. width:100px;
  357. text-align:center;
  358. margin-top:10px;
  359. word-spacing:3px;
  360. color:{color:links};
  361. }
  362.  
  363. .links a {
  364. padding:5px;
  365. }
  366.  
  367. .pagination {
  368. width:400px;
  369. margin-top:20px;
  370. text-align:center;
  371. padding-top:10px;
  372. }
  373.  
  374.  
  375.  
  376. /*----------quotes---------*/
  377.  
  378. .quote {
  379. text-transform:uppercase;
  380. font-size:12px;
  381. font-weight:bold;
  382. text-align:center;
  383. font-style:italic;
  384. }
  385.  
  386. .quotesource {
  387. text-align:center;
  388. margin-top:10px;
  389. }
  390.  
  391.  
  392. /*----------chat---------*/
  393.  
  394. .chat {
  395. line-height:20px;
  396. list-style:none;
  397. }
  398.  
  399. .line.odd {
  400. background:#fafafa;
  401. margin-bottom:2px;
  402. padding:5px;
  403. list-style:none;
  404. font-size:10px;
  405. }
  406.  
  407. .line.even {
  408. background:#f5f5f5;
  409. margin-bottom:2px;
  410. padding:5px;
  411. list-style:none;
  412. font-size:10px;
  413. }
  414.  
  415. .label {
  416. padding-right:1px;
  417. text-transform:lowercase;
  418. font-weight:bold;
  419. color:{color:links};
  420. }
  421.  
  422.  
  423. /*----------questions---------*/
  424.  
  425. .question {
  426. background:#fafafa;
  427. padding:10px;
  428. }
  429.  
  430. .asker {
  431. text-transform:lowercase;
  432. }
  433.  
  434. .answer {
  435. padding:10px;
  436. margin-top:-15px;
  437. }
  438.  
  439. /*----------audio---------*/
  440.  
  441. .playerbutton {
  442. position:relative;
  443. width:30px;
  444. height:35px;
  445. overflow:hidden;
  446. }
  447.  
  448. .playerbuttonhug {
  449. position: absolute;
  450. top:-7px;
  451. left:2px;
  452. }
  453.  
  454. .tumblr_audio_player {
  455. height:50px;
  456. width:400px;
  457. }
  458.  
  459. .playerbuttonbg {
  460. position:absolute;
  461. width:35px;
  462. height:35px;
  463. background-color:#e4e4e4;
  464. padding:10px;
  465. }
  466.  
  467. .trackdetails {
  468. width:auto;
  469. display:inline-block;
  470. margin-left:70px;
  471. font-size:10px;
  472. letter-spacing:1px;
  473. text-transform:lowercase;
  474. padding:5px;
  475. line-height:15px;
  476. }
  477.  
  478. .audiowrapper {
  479. position:relative;
  480. display:inline-block;
  481. }
  482.  
  483. /*------permalink page--------*/
  484.  
  485. .permainfo {
  486. text-align:right;
  487. }
  488.  
  489. /*----------credit---------*/
  490.  
  491. .credit {
  492. font-size:8px;
  493. position:fixed;
  494. font-weight:bold;
  495. bottom:5px;
  496. right:15px;
  497. z-index:10;
  498. text-align:right;
  499. letter-spacing:1px;
  500. padding:2px;
  501. }
  502.  
  503. .credit a {
  504. color:{color:links};
  505. text-decoration:none;
  506. }
  507.  
  508. .credit a:hover {
  509. color:{color:links hover};
  510. text-decoration:none;
  511. }
  512.  
  513.  
  514. </style>
  515.  
  516.  
  517. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  518. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  519. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  520.  
  521.  
  522.  
  523. </head>
  524.  
  525. <body>
  526. <div class="container">
  527.  
  528. <div class="credit">
  529. <a title="theme" href="http://siothemes.tumblr.com/" target="_blank">SIO</a></div>
  530.  
  531.  
  532. <div class="sidebar">
  533.  
  534. {block:IfShowSidebarImage}
  535. <div class="sidebarimage">
  536. <a href="/"><img src="{image:sidebar image}">
  537. </a></div>
  538. {/block:IfShowSidebarImage}
  539.  
  540. {block:ifShowSidebarTitle}
  541. <div class="sidetitle">
  542. {block:ifShowSidebarImage}
  543. {Title}
  544. {/block:ifShowSidebarImage}
  545. {block:ifnotShowSidebarImage}
  546. <a href="/">{Title}</a>
  547. {/block:ifnotShowSidebarImage}
  548. </div>
  549. {/block:ifShowSidebarTitle}
  550.  
  551. {block:ifShowDescription}
  552. <div class="description">{Description}</div>
  553. {/block:ifShowDescription}
  554.  
  555.  
  556. <div class="links">
  557. <a href="/">home</a>
  558. <a href="/ask">inbox</a>
  559. {block:IfShowLink1}
  560. <a href="{text:link 1 url}">{text:link 1 title}</a>
  561. {/block:IfShowLink1}
  562.  
  563. {block:IfShowLink2}
  564. <a href="{text:link 2 url}">{text:link 2 title}</a>
  565. {/block:IfShowLink2}
  566.  
  567. {block:IfShowLink3}
  568. <a href="{text:link 3 url}">{text:link 3 title}</a>
  569. {/block:IfShowLink3}
  570.  
  571. {block:IfShowLink4}
  572. <a href="{text:link 4 url}">{text:link 4 title}</a>
  573. {/block:IfShowLink4}
  574. </div>
  575. </div>
  576.  
  577.  
  578. <div class="entries">
  579. {block:Posts}
  580. <div class="posts">
  581.  
  582. {block:Text}
  583. <h1>{block:Title}{Title}{/block:Title}</h1>
  584. {Body}{/block:Text}
  585.  
  586.  
  587. {block:Photo}
  588. {LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}
  589. {block:ifCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptions}
  590. {/block:Photo}
  591.  
  592.  
  593. {block:Photoset}
  594. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  595.  
  596. {block:ifCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptions}
  597. {/block:Photoset}
  598.  
  599.  
  600. {block:Quote}
  601. <div class="quote">"{Quote}"</div>
  602. {block:Source}<div class="quotesource"> ~ {Source} ~</div>
  603. {/block:Source}{/block:Quote}
  604.  
  605.  
  606. {block:Link}
  607. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  608. {block:Description}{Description}{/block:Description}
  609. {/block:Link}
  610.  
  611.  
  612. {block:Chat}
  613. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  614. {/block:Chat}
  615.  
  616.  
  617. {block:Audio}
  618. {block:AudioPlayer}
  619. <div class="audiowrapper">
  620. <div class="playerbuttonbg">
  621. <div class="playerbutton">
  622. <div class="playerbuttonhug">
  623. {AudioPlayerGrey}
  624. </div></div></div>
  625.  
  626. <div class="trackdetails">
  627. {block:TrackName}<b>TRACK:</b> {TrackName}{/block:TrackName}<br>
  628.  
  629. {block:Artist}<b>ARTIST:</b> {Artist}{/block:Artist}<br>
  630.  
  631. <b>PLAYS:</b> {FormattedPlayCount}</div></div>
  632. {/block:AudioPlayer}
  633.  
  634. {block:ifCaptions}{block:Caption}
  635. <div class="caption">{Caption}</div>
  636. {/block:Caption}{/block:ifCaptions}
  637. {/block:Audio}
  638.  
  639.  
  640. {block:Video}
  641. {Video-400}
  642. {block:ifCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptions}
  643. {/block:Video}
  644.  
  645.  
  646. {block:Answer}
  647. <div class="question">
  648. <div class="asker"><b>{Asker} said:</b></div>
  649. {Question}</div><br>
  650. <div class="answer">
  651. {Answer}</div>
  652. {/block:Answer}
  653.  
  654.  
  655. {block:IndexPage}
  656. {block:Date}
  657. <div class="info">
  658.  
  659. <b><a href="{Permalink}">{TimeAgo}</b></a>
  660.  
  661. {block:NoteCount}&nbsp;&nbsp;
  662. <a href="{Permalink}">{NoteCount}n</a>
  663. {/block:NoteCount}&nbsp;&nbsp;
  664.  
  665. <a href="{ReblogURL}" target="_blank" class="details">reblog</a>
  666.  
  667. </div>
  668. {/block:Date}
  669.  
  670. {block:ifShowTags}
  671. {block:HasTags}
  672. <div class="tags">
  673. {block:Tags}
  674. <a href="{TagURL}">#{Tag}</a>
  675. {/block:Tags}
  676. </div>
  677. {/block:HasTags}
  678. {/block:ifShowTags}
  679.  
  680. {/block:IndexPage}
  681.  
  682. </div>
  683.  
  684.  
  685.  
  686. {block:PermalinkPage}
  687. {block:Date}
  688.  
  689. {block:ifnotCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifnotCaptions}
  690.  
  691. <div class="permainfo">
  692.  
  693. posted on the {DayofMonth}{DayOfMonthSuffix} of {Month} {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  694.  
  695. {block:RebloggedFrom}<br>
  696. via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  697. source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  698. {/block:RebloggedFrom}
  699.  
  700. {block:HasTags}<br>
  701. tagged as:{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}
  702. {/block:HasTags}
  703.  
  704. </div>
  705.  
  706. {block:PostNotes}{PostNotes}{/block:PostNotes}
  707.  
  708. </div>
  709. {/block:Date}
  710. {/block:PermalinkPage}
  711.  
  712.  
  713.  
  714. {/block:Posts}
  715.  
  716.  
  717. <div class="pagination">
  718. {block:Pagination}
  719. {block:PreviousPage}
  720. <a href="{PreviousPage}">back</a>{/block:PreviousPage}&nbsp;
  721.  
  722. {block:NextPage}
  723. <a href="{NextPage}">forth</a>
  724. {/block:NextPage}
  725. {/block:Pagination}
  726. </div>
  727.  
  728.  
  729. {block:ContentSource}
  730. <!---{SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
  731. width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
  732. {/block:SourceLogo}
  733. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --->
  734. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  735.  
  736.  
  737.  
  738.  
  739. <script>
  740. $(document).ready(function(){
  741. $('.photo-slideshow').pxuPhotoset({
  742. lightbox: true,
  743. rounded: false,
  744. gutter: '1px',
  745. borderRadius: '0px',
  746. photoset: '.photo-slideshow',
  747. photoWrap: '.photo-data',
  748. photo: '.pxu-photo'
  749. });
  750. });
  751. </script>
  752.  
  753. </body>
  754.  
  755. </div></div></div></div></div></div></div></div></div></div></div>
  756. </html>
Add Comment
Please, Sign In to add comment